WordPress4分页
入门菜鸟,希望能给和菜鸟相互取暖
最近在改造wordpress,自己写代码做了个分页
1,在自己主题下的style.css中增加如下css
Js代码
.pagination { width: auto; display: block; text-align: center; margin: 30px; } .pagination a { background-color: #eee; text-decoration: none; color: #999; font-size: 18px; padding: 0px 10px; line-height: 32px; height: 32px; margin: 0px 0.5px; } .pagination a.page-btn { width: 40px; } .pagination a.page-btn .icon-prev { position: absolute; width: 0px; height: 0px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 6px solid transparent; border-right: 6px solid transparent; border-left: none; border-right: 6px solid #999; left: 50%; margin-left: -3px; top: 50%; margin-top: -6px; -webkit-transition: all 0.1s ease; transition: all 0.1s ease; } .pagination a.page-btn .icon-next { position: absolute; width: 0px; height: 0px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 6px solid transparent; border-right: 6px solid transparent; border-right: none; border-left: 6px solid #999; left: 50%; margin-left: -3px; top: 50%; margin-top: -6px; -webkit-transition: all 0.1s ease; transition: all 0.1s ease; } .pagination a:hover { color: #fff; } .pagination a:hover .icon-prev { width: 0px; height: 0px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 6px solid transparent; border-right: 6px solid transparent; border-left: none; border-right: 6px solid #fff; } .pagination a:hover .icon-next { width: 0px; height: 0px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 6px solid transparent; border-right: 6px solid transparent; border-right: none; border-left: 6px solid #fff; } .pagination span { display: inline-block; margin: 0px 1px; color: #adadad; font-size: 18px; }
2, 将如下代码copy到自己theme的functions.php中,
Php代码
/** /** * @param int $total_pages * 总页数 * @param int $paged * 当前页数从1计 * @param int $visible_count * 可见的页码数,接受自定义,如果自定义小于1或者大于max,置为max * *@author shandaiwang */ define('MAX_VISIBLE_PAGE_COUNT', 20); function pagination($total_pages = 0, $current_page = 1, $visible_count = MAX_VISIBLE_PAGE_COUNT){ // 入参适配 if($total_pages <= 1) { return; } if($current_page <= 0) { $current_page = 1; } if($visible_count <= 0 || $visible_count > MAX_VISIBLE_PAGE_COUNT) { $visible_count = MAX_VISIBLE_PAGE_COUNT; } // 入参适配结束 // 页码列表适配 $range = ceil(($visible_count + 1) / 2); $start = $current_page - $range + 1; if($start < 1) { $start = 1; } $end = $start + $visible_count - 1; if ($end > $total_pages) { $end = $total_pages; // 向前反推,尽可能使显示个数为$visible_count $start = $end - $visible_count + 1; if($start < 1) { $start = 1; } } // 页码列表适配结束 // 渲染 echo "<div class='pagination'>"; if($current_page > 1) { // pre echo('<a href="'.get_pagenum_link($current_page - 1).'" class="common-btn page-btn"> <div class="icon-prev"></div></a>'); } if($start != 1) { // first[...] echo('<a href="'.get_pagenum_link(1).'" class="common-btn">1</a>'); if ($start != 2) { echo('<span>...</span>'); } } for ($i=$start; $i <= $end; $i++){ // list if ($i == $current_page) { echo('<a href="javascript:;" class="common-btn active">'.$i.'</a>'); } else { echo('<a href="'.get_pagenum_link($i).'" class="common-btn">'.$i.'</a>'); } } if($end < $total_pages) { //[...]last if ($end + 1 < $total_pages) { echo('<span>...</span>'); } echo('<a href="'.get_pagenum_link($total_pages).'" class="common-btn">'.$total_pages.'</a>'); } if($current_page < $total_pages) { // next echo('<a href="'.get_pagenum_link($current_page + 1).'" class="common-btn page-btn"> <div class="icon-next"></div></a>'); } echo "</div>\n"; }
3,在需要的地方引用即可,形如
至于如何获得$total_pages, $current_page,我用的WP query,形如

Outils d'IA chauds

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

AI Hentai Generator
Générez AI Hentai gratuitement.

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Dans ce chapitre, nous comprendrons les variables d'environnement, la configuration générale, la configuration de la base de données et la configuration de la messagerie dans CakePHP.

PHP 8.4 apporte plusieurs nouvelles fonctionnalités, améliorations de sécurité et de performances avec une bonne quantité de dépréciations et de suppressions de fonctionnalités. Ce guide explique comment installer PHP 8.4 ou mettre à niveau vers PHP 8.4 sur Ubuntu, Debian ou leurs dérivés. Bien qu'il soit possible de compiler PHP à partir des sources, son installation à partir d'un référentiel APT comme expliqué ci-dessous est souvent plus rapide et plus sécurisée car ces référentiels fourniront les dernières corrections de bogues et mises à jour de sécurité à l'avenir.

Pour travailler avec la date et l'heure dans cakephp4, nous allons utiliser la classe FrozenTime disponible.

Pour travailler sur le téléchargement de fichiers, nous allons utiliser l'assistant de formulaire. Voici un exemple de téléchargement de fichiers.

Dans ce chapitre, nous allons apprendre les sujets suivants liés au routage ?

CakePHP est un framework open source pour PHP. Il vise à faciliter grandement le développement, le déploiement et la maintenance d'applications. CakePHP est basé sur une architecture de type MVC à la fois puissante et facile à appréhender. Modèles, vues et contrôleurs gu

Visual Studio Code, également connu sous le nom de VS Code, est un éditeur de code source gratuit – ou environnement de développement intégré (IDE) – disponible pour tous les principaux systèmes d'exploitation. Avec une large collection d'extensions pour de nombreux langages de programmation, VS Code peut être c

Le validateur peut être créé en ajoutant les deux lignes suivantes dans le contrôleur.
