web-dev-qa-db-fra.com

Table des matières de la duplication pour poteau paginé

J'ai un blog technique avec de très longs messages. J'utilise la pagination (via <! - nextpage ->) pour séparer le contenu en plusieurs pages.

J'ajoute manuellement une table des matières html (TOC) en haut de chaque page de l'un de mes messages (ci-dessous n'est qu'un exemple pour un message, le contenu change de message en message):

<table class="noborder"><tr><td><ol>
<li class="highlight"><a href="http://www.website.com/tutorials/raspberry-pi-i2c-and-spi/1/">Introduction</a></li>
<li class="nohighlight"><a href="http://www.website.com/tutorials/raspberry-pi-i2c-and-spi/2/">I2C Fundamentals</a></li>
<li class="nohighlight"><a href="http://www.website.com/tutorials/raspberry-pi-i2c-and-spi/3/">I2C on the Raspberry Pi</a></li>
<li class="nohighlight"><a href="http://www.website.com/tutorials/raspberry-pi-i2c-and-spi/4/">Enabling I2C on Raspberry Pi</a></li>
<li class="nohighlight"><a href="http://www.website.com/tutorials/raspberry-pi-i2c-and-spi/5/">I2C Transactions Using Python</a></li>
<li class="nohighlight"><a href="http://www.website.com/tutorials/raspberry-pi-i2c-and-spi/6/">Raspberry Pi to AVR I2C Communication</a></li>
</ol></td></tr></table>

Pour chaque page du message, je modifie la classe de liste css ci-dessus ("mettre en surbrillance" ou "nohighlight") afin d'indiquer à l'utilisateur la page affichée. Vous pouvez avoir une meilleure idée de ce que je veux dire en naviguant sur l'un des liens ci-dessus.

Alors voici la chose. Chaque fois que je modifie la structure de la page, les titres de la table des matières, etc., je dois dupliquer, puis éditer le code html de chaque page. C'est une douleur énorme pour les publications de plus de 20 pages.

Est-il possible d'automatiser cela? J'envisage un shortcode qui définirait toute la mise en forme HTML de la table des matières et les titres de page en haut de l'article, puis un autre shortcode que je pourrais appeler la table des matières avec un index pour charger le code html, mais également définir la valeur de la classe sur surligner "ou" nohighlight "en fonction d'une valeur d'index fournie.

Est-ce possible? Puis-je "stocker" des données sur des codes courts? Ou peut-être que je peux stocker les données de la table des matières dans un champ personnalisé, puis les modifier conditionnellement lors de l'accès?

J'apprécierais un peu de direction. Merci

EDIT

Avec l'aide de nmr (voir ci-dessous), je publie une solution qui fonctionne à l'aide de champs personnalisés qui fonctionnent pour mon site. Vous devrez modifier les fichiers css et html pour l’adapter à vos propres besoins.

Étape 1) Ajoutez les éléments suivants au fichier functions.php:

function paginated_toc_function() {
    global $numpages;
    $post_link = get_permalink();
    $page_number = get_query_var('page');

    if ($page_number == 0) {
        $page_number = 1;
    }

    $toc_list = get_post_custom_values($key = 'toc');
    $toc = explode(PHP_EOL, $toc_list[0]);
    array_unshift($toc, "");

    $post_link .= substr($post_link, -1) == '/' ? '' : '/';

    $html = '<table class="noborder"><tr><td><ol>';

    for ($i = 1; $i <= count($toc) && $i <= $numpages; ++$i) {
        $highlight = ($i == $page_number) ? 'highlight' : 'nohighlight';
        $html .= '<li class="' .$highlight. '"><a href="' . $post_link . $i . '">' . htmlspecialchars($toc[$i]) . '</a></li>';
    }

    $html .= '</td></tr></table></ol>';

    return $html;
}

add_shortcode('paginated_toc', 'paginated_toc_function');

Étape 2) Créez un nouveau champ personnalisé en post. Nommez-le 'toc' et ajoutez une liste d'en-têtes de table de contenu, chacun sur une nouvelle ligne. Par exemple:

Introduction
I2C Fundamentals
I2C on the Raspberry Pi
Enabling I2C on Raspberry Pi
I2C Transactions Using Python
Raspberry Pi to AVR I2C Communication

Étape 3) Ajoutez [paginated_toc] sur chaque page paginée du message. Je le place près du sommet. Terminé!

postscustom-fieldshortcodepaginationconditional-content
1
RadianDynamics

Vous divisez le contenu d'un message en plusieurs pages avec <!--nextpage-->. Vous pouvez donc utiliser $page_number = get_query_var( 'page' ) pour obtenir le numéro de page actuel et la variable globale $numpages pour obtenir le nombre de pages de l'article actuel.

Affichage de la table des matières:

global $numpages;
$post_link = get_permalink();
$page_number = get_query_var( 'page' );
$toc = [
   1=>'Introduction', 
   'I2C Fundamentals', 
   'I2C on the Raspberry Pi', 
   'Enabling I2C on Raspberry Pi', 
   'I2C Transactions Using Python', 
   'Raspberry Pi to AVR I2C Communication'];

$post_link .= substr($post_link, -1) == '/' ? '' : '/';
$html = '';
for( $i = 1; $i <= count($toc) && $i <= $numpages; ++$i) {
    $highlight = ($i == $page_number) ? 'highlight' : 'nohighlight';
    $html .= '<li class="' .$highlight. '"><a href="' . $post_link . $i . '">' . $toc[$i] . '</a></li>';
}
1
nmr