הוספת ״תוכן עניינים״ דינמי לפוסטים באתרי וורדפרס

Efficient TOC Widget הוא תוסף וורדפרס שנועד להוסיף תוכן עניינים (TOC) לפוסטים באתר שלכם. התוסף עוזר לקוראים בבלוג שלכם לנווט במהירות בתוכן ארוך ובכך משפר את חוויית המשתמש באתר שלכם.

סקירת תוסף תוכן העניינים

התוסף מייצר תוכן עניינים באופן דינמי על ידי לכידת כל כותרת <h2> בתוכן הפוסט. לכל כותרת ניתן מזהה ייחודי וקישור עוגן, דבר המאפשר למשתמשים לדלג לכל חלק בפוסט בנפרד.

הוספת תוכן עניינים לפוסטים יכולה לשפר את הנראות במנועי חיפוש. ייתכן וגוגל תזהה את אותו תוכן עניינים ותציג קישורים לחלקים ספציפיים ישירות בדפי תוצאות החיפוש. מכאן שלמשתמשים תהיה אופציה לניווט מהיר לתוכן הרלוונטי.

פעולה זו אף עשויה לשפר את שיעורי ההקלקות (CTR) מכיוון שהמשתמשים רואים מבנה מאורגן וברור, מה שהופך את התוכן שלכם לנגיש ומושך יותר בתוצאות החיפוש.

הוספת תוכן עניינים למשתמשים משפרת את חוויית המשתמש על ידי הקלה על הניווט בתוכן ארוך, מה שיכול להשפיע לטובה על ה-SEO שלכם.

שימוש בהיררכיית כותרות נכונה בפוסטים שלכם הופך את הניווט בתוכן העניינים ליעיל אף יותר. בואו נצלול קצת ונבין איך הקוד עובד…

ניתן לראות את התוסף בפעולה בסרגל הצידי של פוסט זה. ההשראה לתוסף זה הגיעה מהפוסט של דורזקי ״בניית תוכן עניינים דינאמי בוורדפרס״.

פירוק הקוד ובניית תוכן העניינים

כדי להשתמש בתוסף זה, צרו קובץ PHP חדש (למשל, efficient-toc-widget.php), ושמרו אותו בתיקיית wp-content/plugins. פעולה זו תגרום לתוסף להיות זמין להפעלה בלוח הבקרה של וורדפרס.

הנה הקוד המלא של התוסף:

<?php 
/**
* Plugin Name: Efficient TOC Widget
* Description: Add a table of contents widget to single posts.
* Version: 1.4
* Author: Roee Yossef
* Text Domain: efficient-toc-widget
* Domain Path: /languages
*/

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly.
}
class Efficient_TOC_Widget {

    private $headings  = [];
    private $counter   = 0;
    private $permalink = '';

    public function __construct() {
        add_action( 'XXXXXX', [ $this, 'show_toc' ] ); // Replace 'XXXXXX' with the desired action hook
        add_filter( 'the_content', [ $this, 'build_toc' ], 12 );
    }

    public function build_toc( $content ) {
        if ( ! is_singular( 'post' ) || ! in_the_loop() ) {
            return $content;
        }
        $this->counter   = 0;
        $this->headings  = [];
        $this->permalink = get_permalink();
        $content = preg_replace_callback( '/<h2[^>]*>(.*?)<\/h2>/i', [ $this, 'extract_headings' ], $content );

        return $content;
    }

    public function extract_headings( $matches ) {
        $id = 'title_' . $this->counter++;

        $this->headings[] = [
            'id'    => $id,
            'title' => strip_tags( $matches[1] )
        ];

        return sprintf(
            '<h2 id="%s" class="copy-heading" data-clipboard-text="%s">%s</h2>',
            esc_attr( $id ),
            esc_url( $this->permalink . '#' . $id ),
            wp_kses_post( $matches[1] )
        );
    }

    public function generate_toc() {
        if ( empty( $this->headings ) || count( $this->headings ) < 2 ) {
            return false; 
        }
    
        $html = '<div id="toc" class="toc_wrapper">';
        $title = esc_html__( 'Table of Contents', 'efficient-toc-widget' );
        $html .= '<p class="toc-title">' . $title . '</p>';
        $html .= '<ul>';
        $first = true;

        foreach ( $this->headings as $heading ) {
            $class = $first ? ' class="current"' : '';
        
            $html .= sprintf(
                '<li%s><a href="#%s">%s</a></li>',
                $class,
                esc_attr( $heading['id'] ),
                esc_html( $heading['title'] )
            );
            $first = false;
        }

        $html .= '</ul>';
        $html .= '</div>';

        return $html;
    }

    public function show_toc() {
        if ( is_singular( 'post' ) ) {
            global $post;

            if ( empty( $this->headings ) ) {
                $this->counter   = 0;
                $this->headings  = [];
                $this->permalink = get_permalink();
                preg_replace_callback( '/<h2[^>]*>(.*?)<\/h2>/i', [ $this, 'extract_headings' ], $post->post_content );
            }

            $toc = $this->generate_toc();
            if ( $toc ) {
                echo wp_kses_post( $toc );
            }
        }
    }
}

new Efficient_TOC_Widget();

כיצד התוסף מעבד כותרות

המתודה build_toc() מתחברת לפילטר the_content עם עדיפות 12. כך מובטח שהיא תרוץ לאחר שוורדפרס מעבדת שורטקודים (עדיפות 11), כך שגם כותרות שנוצרו מתוך שורטקודים ייכללו.

תבנית הביטוי הרגולרי /<h2[^>]*>(.*?)</h2>/i תופסת את כל כותרות ה-<h2> ללא תלות בתכונות קיימות כמו מחלקות או מזהים שגוטנברג או תוספים אחרים עשויים להוסיף. ללא החלק [^>]*, כותרות כמו <h2 class="wp-block-heading"> לא ייתפסו כלל.

כל כותרת מקבלת מזהה עוגן רציף בפורמט title_0, title_1 וכו'. מזהים אלו משמשים בקישורי תוכן העניינים ובתכונת data-clipboard-text, כך שמשתמשים יכולים לשתף קישורים ישירים לחלקים ספציפיים. כך נוצרים כתובות URL נקיות וקריאות כשמשתמשים משתפים קישורים למקטעים ספציפיים, ומנועי חיפוש מקבלים מזהי fragment בעלי משמעות.

ה-callback של extract_headings() משתמש ב-wp_kses_post() בעת הכנסת תוכן הכותרת מחדש. כך נשמר HTML פנימי (כמו <code> או <strong>) שעשוי להיות בתוך הכותרת, תוך סינון תגיות לא בטוחות. עבור פריטי רשימת תוכן העניינים, נעשה שימוש ב-strip_tags() כדי לייצר תוויות טקסט פשוטות.

כל כותרת מקבלת גם תכונת data-clipboard-text שמכילה את כתובת ה-URL המלאה עם ה-anchor fragment שלה. ניתן לשלב זאת עם ספריית clipboard (כמו clipboard.js) כדי לאפשר למשתמשים להעתיק קישור ישיר למקטע כלשהו בלחיצה על הכותרת.

טעינת סגנונות עבור תוכן העניינים

כדי לעצב את תוכן העניינים, צרו קובץ CSS בתיקיית התוסף וטענו אותו בצורה נכונה באמצעות wp_enqueue_style(). ניתן להוסיף פונקציה זו לקובץ התוסף או לחבר אותה בנפרד:

function efficient_toc_enqueue_styles() {
    if ( is_singular( 'post' ) ) {
        wp_enqueue_style(
            'efficient-toc-widget',
            plugin_dir_url( __FILE__ ) . 'css/toc-style.css',
            [],
            '1.4'
        );
    }
}
add_action( 'wp_enqueue_scripts', 'efficient_toc_enqueue_styles' );

הבדיקה is_singular( 'post' ) מבטיחה שהסגנונות ייטענו רק בעמודי פוסט בודדים, כך ששאר העמודים באתר יישארו קלים.

באמצעות CSS משלכם תוכלו לשלוט על נראות הפונטים, צבעים, ריווחים והדגשת הפריט הפעיל כדי להתאים את תוכן העניינים לעיצוב האתר שלכם.

בחירת Hook מותאם אישית להצגת ה-TOC

מכיוון שהתוסף משתמש ב-Hook בשם XXXXXX (דוגמה בלבד), עליכם להחליף אותו ב-Hook אמיתי בתבנית שלכם, בהתאם למקום בו תרצו שתוכן העניינים יופיע. לדוגמה, אם תרצו שהוא יופיע בסוף הפוסט, תוכלו להוסיף Hook משלכם בתבנית.

הוספת Hook מותאם אישית בתבנית שלכם

תוכלו ליצור הוק בתבנית single.php או בכל תבנית עמוד אחרת באופן הבא:

do_action( 'custom_toc_hook' );

לאחר מכן, בתוסף, החליפו את XXXXXX ב-custom_toc_hook:

add_action( 'custom_toc_hook', [ $this, 'show_toc' ] );

הוספת שורה זו בתבנית שלכם תאפשר לכם לשלוט היכן יופיע תוכן העניינים כך שיוכל להשתלב באתר מבחינת מיקום.

השימוש בהוקים של וורדפרס הוא דרך נהדרת להוסיף פונקציות ייחודיות בדיוק במיקום שבו הן נדרשות בתבנית שלכם. שימו לב שכרגע מוגדר שתוכן העניינים יופיע אך ורק עבור פוסטים (single.php בד״כ).

הצגת TOC לפי מספר הכותרות המינימלי

תוכן העניינים יווצר רק אם יש לפחות שתי כותרות <h2> בפוסט המדובר. כדי לשנות סף זה, ערכו את ערך ההשוואה במתודה generate_toc():

if ( empty( $this->headings ) || count( $this->headings ) < 2 ) {

על ידי הגדרת מספר שונה, תוכלו לשלוט מתי יוצג תוכן העניינים לפי מספר הכותרות המינימלי שקיים בפוסט.

שאלות נפוצות

שאלות נפוצות על תוסף ה-Efficient TOC Widget:

סיכום

תוסף ה-"Efficient TOC Widget" משפר את הניווט והקריאות של פוסטים ומציע תוכן עניינים גמיש וידידותי למשתמש. בזכות שימוש בהוקים מותאמים אישית, הגנות מתאימות על הפילטר the_content, ומנגנון גיבוי בטוח לסרגל צדדי ב-show_toc(), ניתן לשלב את התוסף בכל נושא עיצוב (theme) לשיפור חוויית המשתמש וה-SEO.