ארכיון התג: תבניות

הדגשת תגובות מנהל הבלוג (או כותב הפוסט)

פורסם בתאריך מאת
31

כפי שניתן לראות בתגובות לפוסטים השונים אצלי בבלוג הוספתי הדגשה (על ידי צבע רקע) לתגובות שנכתבו על ידי.
אני עשיתי את השינויים ידנית בקוד, אבל יש שלושה תוספים שעושים אותם חצי אוטומטית.
תוסף אחד בשם comments custom display, השני Author Highlight והשלישי bm comment highlight
לרוע המזל שלושתם מצריכים עדיין שינויי קוד בתבנית ועל כן אני אישית לא רואה הבדל גדול בינם לבין השינוי הידני.

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

התאוריה

על מנת להדגיש את התגובות של כותב הפוסט או מנהל הבלוג (עניין של הגדרה) צריך לדעת לזהות אותו ובמקרה שהוא כותב התגובה להוסיף (או להחליף) לה איזשהו class של css שישנה את העיצוב שלה בהתאם.
השינויים הנדרשים הם:
1. שינוי קוד בקובץ comments.php על מנת לזהות את כותב התגובה ולהוסיף את ה-class הרצוי
2. הוספת העיצוב עצמו בקובץ ה-css של התבנית.

איך עושים את זה

1. זיהוי כותב התגובה
הנחת הבסיס כאן היא שאנחנו מזהים את כותב התגובה ע"פ כתובת המייל שלו
ע"כ הקוד בו נשתמש יהיה:
[sourcecode language='php']comment_author_email)
$myclass = ' author'; ?>[/sourcecode]
בקצרה: אנחנו בודקים אם כתובת הדוא"ל של המגיב זהה לזו של כותב הפוסט.
הפונקציה get_the_author_email מחזירה את כתובת המייל של כותב הפוסט ואילו המשתנה $comment->comment_author_email מכיל את כתובת המייל של המגיב, אם אלו זהות – נסמן את התגובה.
את שורת הקוד שלמעלה יש לשים בתוך לולאת התגובות לפני הדפסת איבר התגובה, כלומר לאחר השורה:
[sourcecode language='php'][/sourcecode]

2. הוספת הזיהוי לתגובה עצמה
בכל תבנית שהיא יש לנו רשימה של תגובות המיוצגות ע"י איברים זהים (li או div כתלות בתבנית) כל שעלינו לעשות הוא להוסיף לתגובות הללו את אפיון העיצוב החדש שלנו myclass
כלומר הקוד של ראשית התגובה יהפוך מהמקור:
[sourcecode language='php']

  • " id="comment-">[/sourcecode]
    שימו לב שבמקרה שלפנינו כבר הייתה התייחסות לעיצוב התגובה ולכן רק הוספתי את העיצוב החדש, במקרים אחרים יתכן שיהיה צורך להוסיף את כל ההתיחסות כלומר:
    [sourcecode language='php']class=""[/sourcecode]

    3.הוספת העיצוב לקובץ העיצוב
    זה החלק הפשוט. בסוף קובץ העיצוב (style.css) יש להוסיף את העיצוב החדש והשונה.
    במקרה שלי ההבדל היה רק בצבע הרקע וע"כ נראה כך:
    [sourcecode language='css'] .author { background-color: #D8E4FC } [/sourcecode]
    ניתן כמובן להוסיף לכל העסק מאפיינים נוספים אחרים בהתאם לרצונכם.

    17.4.08 עדכון: בהתאם להערה של רן וכיוון שהרעיון היה להדגיש את התגובות של כותב הפוסט (ולאו דווקא מנהל הבלוג) עשיתי חיפוש קטן, השינויים הדרושים בקוד שלמעלה הם:
    1. החלפת דוא"ל כותב התגובה במזהה המשתמש שלו בבלוג
    2. החלפת דוא"ל כותב הפוסט במזהה המשתמש שלו בבלוג
    במקום הקוד:
    [sourcecode language='php']comment_author_email)
    $myclass = ' author'; ?>[/sourcecode]
    הקוד ייראה כך:
    [sourcecode language='php']post_author == $comment->user_id)
    $myclass = ' author'; ?>[/sourcecode]

    025 הדגשת תגובות מנהל הבלוג (או כותב הפוסט) נהניתם ? הרשמו לעדכוני RSS !

    • הוספת תפריט ניווט עליון לתבנית

    פורסם בתאריך מאת
    18

    בעקבות שאלה בקבוצת הדיון של וורדפרס בעברית.

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

    1
    <?php wp_list_pages('title_li=&depth=1');?>

    כאשר במקרה הזה דאגנו שיוצגו דפים ללא תתי דפים (depth=1) ולא תופיע כותרת לרשימה(title_li=).

    צריך לזכור לעטוף את הקוד בתגיות רשימה כלומר:

    1
    2
    3
    <ul>
                <?php wp_list_pages('title_li=&depth=1');?>
    </ul>

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

    1
    <li <?php if(is_home()){echo 'class="current_page_item"';}?>><a href="<?php bloginfo('siteurl'); ?>" >דף הבית</a></li>

    כך שהקוד כולו נראה כך:

    1
    2
    3
    4
    <ul #id=menu>
            <li <?php if(is_home()){echo 'class="current_page_item"';}?>><a href="<?php bloginfo('siteurl'); ?>" >דף הבית</a></li>
            <?php wp_list_pages('title_li=&depth=1');?>
    </ul>

    הקוד שיש לנו כעת מייצר רשימת דפים בבלוג הכוללת את דף הבית אך נראית כרשימה רגילה קרי:

    את הקוד הזה צריך לשים בקובץ הנכון בהתאם לצרכי העיצוב שלנו. בד"כ זה יהיה בקובץ header.php

    על מנת להפוך את העסק לסרגל ניווט אופקי צריך להוסיף קצת הגדרות CSS (בקובץ style.css של התבנית):

    ראשית נגדיר שלרשימה שלנו אין תבליטים:

    1
    2
    3
    #menu ul {
        list-style: none;
    }

    עכשיו נגדיר שאנחנו רוצים את הרשימה כאופקית ולא אנכית:

    1
    2
    3
    #menu li {
        display: inline;
    }

    נגדיר את גודל איבר הרשימה כך שהקישורים יהיו מרווחים יפה ושלא יכללו קו תחתון:

    1
    2
    3
    4
    5
    #menu a
    {
        padding:8px 16px;
        text-decoration: none;
    }

    זה הכל – קיבלנו את התוצאה הבאה:
    pages-nav.png

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    #menu a:hover,
    #menu a:active,
    #menu li.current_page_item a:link,
    #menu li.current_page_item a:visited,
    #menu li.current_page_item a:hover,
    #menu li.current_page_item a:active
    {
        background:#456;
        color:#fff;
        border:0;
    }

    אבל אלו כבר משחקי עיצוב על הבסיס הקיים.

    בהצלחה

    025 הוספת תפריט ניווט עליון לתבנית נהניתם ? הרשמו לעדכוני RSS !

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

    פורסם בתאריך מאת
    4

    ישנן תבניות וורדפרס בהן תמונת ההדר אינה קישור לדף הבית, הבעיה העיקרית עם כך היא ההתניה הפאבלובית של כולנו.
    אנחנו כבר רגילים שקליק על תמונת ההדר (או לפחות על הטקסט המופיע בה) מובילים אותנו לדף הבית, ועל כן מתוסכלים מעט כאשר הדבר לא קורה.
    דוגמה לתבנית אחת שכזו היא 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 !