導讀:建站技術建站技術前幾天在制作一款博客主題時無意中發現原來wordpress默認主題的分頁導航改版了,而且新版的導航布局樣式美觀大方而且還支持不同設備可謂是功能強大又上檔次,于是技術支持網站網站服務器搭建。

前幾天在制作一款博客主題時無意中發現原來wordpress默認主題的分頁導航改版了,而且新版的導航布局樣式美觀大方而且還支持不同設備可謂是功能強大又上檔次,于是果斷把代碼拷貝出來留了一個備份,今天就在模板下載吧分享給大家。

新版分頁導航上面的是電腦版顯示狀態,下面是移動端顯示狀態,既然官方默認的都這么漂亮使用那以后就可以丟掉以前自己美化的樣式了!對于wp的這個改變還是非常滿意的!
?php代碼
<?php
????the_posts_pagination(?array(
???????‘prev_text’?=>?__(?‘上一頁’,?‘chenxingweb’?),
????‘next_text’?=>?__(?‘下一頁’,?‘chenxingweb’?),
????????‘before_page_number’?=>?‘<span?class=“meta-nav?screen-reader-text”>第?</span>’,
????????‘after_page_number’?=>?‘<span?class=“meta-nav?screen-reader-text”>?頁</span>’,
????)?);
?>
把代碼放到列表主循環下面即原來放置分頁導航的位置即可,由于該分頁代碼是在wordpress4.1版本集成的,所以4.1之前的版本不能使用!
?css樣式代碼
/**?等于或大于550px正常PC模式?**/
@media?screen?and?(min-width:550px){
.pagination{float:rightright;}
.pagination?a,.pagination?a:visited{float:left;background:#fff;margin:0?5px?10px?0;pdede后臺模板adding:8px?11px;line-height:100%;border:1px?solid?#ebebeb;border-radius:2px;}
.pagination?.current,.pagination?.dots{background:#fff;float:left;margin:0?5px?0?0;padding:8px?11px;line-height:100%;border:1px?solid?#ebebeb;border-radius:2px;}
.pagination?span.pages{}
.pagination?span.current,.pagination?a:hover{background:#0088cc;color:#fff;border:1px?solid?#0088cc;}
.screen-reader-text,.pages{display:none;}
}
/**?等于或小于550px用于移動設備?**/
@media?screen?and?(max-width:550px){
.pagination{background:#fff;border:1px?solid?#ebebeb;border-radius:2px;}
關鍵詞標簽: 建站 分頁 漂亮
聲明: 本文由我的SEOUC技術文章主頁發布于:2023-07-23 ,文章漂亮的WordPress內置分頁導航代碼,建站技術主要講述分頁,漂亮,建站網站建設源碼以及服務器配置搭建相關技術文章。轉載請保留鏈接: http://www.bifwcx.com/article/web_35184.html