קישור עוגן – איך ליצור קישור לחלק או סעיף או קטע מסויים בתוך עמוד בבלוג?

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

כך תוכלו ליצור קישור כזה בקלות.

מה זה קישור עוגן?

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

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

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

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

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

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

קישורי עוגן – איך זה עובד?

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

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

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

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

דוגמה בהמשך.

איך להוסיף קישור עוגן?

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

כדי לעשות זאת, אתם צריכים לוודא שכל התוכן שלכם כתוב בבלוג (בעורך התוכן שלו), כולל המיקום אליו המשתמש צריך להגיע (הערות השוליים לדוגמה).

ובכן, כדי לעשות זאת, אנחנו נחלק זאת ל-2 שלבים:

  1. הוספת עוגן לקטע היעד.
  2. הוספת קישור לקטע המוצא.

כך עושים זאת:

1. הוספת עוגן לקטע היעד

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

id="YOUR-ID"

כאשר "YOUR-ID" הוא מזהה ייחודי שאתם קובעים אותו.

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

ובכן, כדי להוסיף את העוגן, תוכלו לעשות זאת בכמה דרכים אפשר:

וורדפרס

אם אתם משתמשים בבלוג וורדפרס (WordPress), אז אתם יכולים לעשות זאת בכמה דרכים, דרך עורך גוטנברג, דרך עורך הקלאסי או דרך אלמנטור (תוסף לבניית עמודים).

1. דרך גוטנברג (עורך תוכן ברירת מחדל):

  • גשו אל הפסקה או החלק המיועד.
  • בחלק הגדרות "בלוק" בצד, לחצו על "אפשרויות נוספות".
  • בשדה "עוגן HTML" הוסיפו את שם העוגן.

הנה צילום מסך:

קישור עוגן עורך גוטנברג
קישור עוגן עורך גוטנברג

2. עורך קלאסי (עורך תוכן הישן):

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

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

הנה צילום מסך:

קישור עוגן עורך קלאסי
קישור עוגן עורך קלאסי

3. דרך אלמנטור (תוסף בניית עמודים):

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

מערכת ניהול תוכן אחרת

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

עשו זאת בדומה לעורך התוכן הקלאסי בוורדפרס (כתוב מקודם).

2. הוספת קישור לקטע המוצא

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

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

כך זה נראה לדוגמה:

href="#YOUR-ID"

כאשר "YOUR-ID" הוא מזהה ייחודי שקבעתם אותו ככתוב בחלק קודם.

כך תעשו זאת:

וורדפרס

אם אתם משתמשים בבלוג וורדפרס (WordPress), אז אתם יכולים לעשות זאת בכמה דרכים, דרך עורך גוטנברג, דרך עורך הקלאסי או דרך אלמנטור (תוסף לבניית עמודים).

1. עורך גוטנברג:

  • גשו אל הפסקה או החלק המוצא.
  • בחרו את הטקסט או החלק עצמו.
  • לחצו על הסמל קישור.
  • הזינו # + שם העוגן באופן רצוף.
  • לחצו על ENTER או בחרו בכפתור שכתוב internal.

תמונה:

קישור עורך גוטנברג
קישור עורך גוטנברג

2. עורך קלאסי:

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

הנה תמונה:

קישור עורך טקסט קלאסי
קישור עורך טקסט קלאסי

3. אלמנטור:

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

הנה תמונה:

קישור אלמנטור
קישור אלמנטור

מערכת ניהול תוכן אחרת

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

עשו זאת בדומה לעורך התוכן הקלאסי בוורדפרס (כתוב מקודם).

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

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

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

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

הצטרפו כעת בחינם » www.facebook.com/groups/bloggingisrael

כתיבת תגובה