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

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

לכל מי שמכיר את האתר Github ומשתמש בו באופן קבוע יודע שכאשר בונים את קובץ README.md, Github אוטומטית תוסיף לכל הכותרות קישור עוגן בצורה דינאמית.

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

יתרונות בהוספת קישורי עוגן

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

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

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

בניית מנגנון להוספת קישורי עוגן

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

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

שלב ראשון – מציאת כל הכותרת בגוף העמוד

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

על מנת לעשות זאת נפתח את קובץ הפונקציות (functions.php) של תבנית וורדפרס של האתר שלנו ונדביק את הקוד הבא.

/**
 * Find all headings in the page content and inject them with anchor link.
 *
 * @param string $content page content.
 *
 * @return string
 */
function dorzki_generate_titles_anchros_links( $content ) {

	return preg_replace_callback( '/<(h[1-6])>(.*?)<\/h[1-6]>/i', 'dorzki_inject_titles_anchor_link', $content );

}

add_filter( 'the_content', 'dorzki_generate_titles_anchros_links' );


/**
 * Replace the heading with a heading and anchor link.
 *
 * @param array $match math result array.
 *
 * @return string
 */
function dorzki_inject_titles_anchor_link( $match ) {

	return sprintf( '<%1$s><a class="title-anchor-link" id="%2$s" href="#%2$s"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/></svg></a>%3$s</%1$s>', $match[1], sanitize_title( $match[2] ), $match[2] );

}

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

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

הפונקציה מחליפה את הכותרת בכותרת חדשה, אשר כוללת את את קישור העוגן שלנו, ואייקון נחמד של קישור אשר הורדנו מ-Google Material Icons.

שלב שני – הסתרה/הצגת אייקון קישור עוגן

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

נפתח את קובץ העיצוב style.css של תבנית הבת ונדביק את הקוד הבא:

.title-anchor-link {
	visibility: hidden;
	margin-left: -30px;
	padding-right: 5px;
	float: left
}

.title-anchor-link svg {
	fill: #000000;
	transition: all .3s ease;
}

.title-anchor-link:hover svg,
.title-anchor-link:focus svg {
	fill: #0073aa;
}

h1:hover .title-anchor-link,
h2:hover .title-anchor-link,
h3:hover .title-anchor-link,
h4:hover .title-anchor-link,
h5:hover .title-anchor-link,
h6:hover .title-anchor-link {
	visibility: visible;
}

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

סיכום

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

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

יצא לכם להשתמש בקוד? יש לכם רעיונות נוספים לשימוש בקוד הנ״ל? שתפו אותנו בתגובות 🙂