הפיכת תמונת ההדר לקישור

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

הפתרון הוא יחסית פשוט, נוסיף את הקישור למיקום הנכון.

השלב הראשון – למצוא את רכיב ההדר בתבנית.
רכיב תמונת ההדר יופיע תמיד כחלק מהקובץ header.php ולרוב יהיה החלק הראשון בקובץ.
ראשית שווה לדעת כי בדרך כלל קוראים לחלק זה banner,headerimg או header.
איך נזהה אותו בצורה ברורה ?
מציצים בקובץ ה- css (או במקרה זה style.php) ומחפשים התייחסות לקובץ תמונת ההדר (אותה קל לזהות ויזואלית), ולפי השם אליו היא משוייכת ניתן לזהות את הרכיב.
למשל במקרה שלנו חיפוש מהיר בקובץ יביא את התוצאה:

1
2
3
4
5
6
7
8
9
10
11
12
#banner {
    width: 786px;
    height: 130px;
    padding: 0;
    margin-right: -6px;
    overflow: hidden;
    border-right: 1px solid #777;
    border-left: 1px solid #777;
    border-bottom: 1px solid #BBB;
    background-image: url('< ?=$low_header;?>');
    background-position: top right;
}

מכאן – החלק המטפל בהדר נקרא banner.

השלב שני – הוספת הקישור עצמו
במקרה שיש יותר מתמונה בלבד אפשר לעטוף את התוכן של הרכיב בקישור HTML פשוט:

1
<a href="<?php echo get_option('home'); ?>/"></a>

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

1
onclick='top.location=< ? echo get_option('home');?>'

כך שנקבל:

1
<div id="banner" onclick='top.location="http://www.dakars.info/"'></div>

025 הפיכת תמונת ההדר לקישור נהניתם ? הרשמו לעדכוני RSS !

4 תגובות על הפוסט “הפיכת תמונת ההדר לקישור

  1. פינגבאק: עשן גאה 4.0 » אחותי דקר

  2. פינגבאק: שינויים קטנים (ומשמעותיים) בבלוג | האויב הציני

כתיבת תגובה

האימייל שלך לא יוצג באתר. (*) שדות חובה מסומנים

*


:mrgreen::|:twisted::arrow:8O:):?8):evil::D:idea::oops::P:roll:;):cry::o:lol::x:(:!::?:

תגי HTML מותרים: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>