ארכיון התג: מדריכים

קיצורי דרך בוורדפרס

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

לוורדפרס יש מנגנון מובנה בשם shortcode המנגנון הזה נכנס החל מגרסה 2.5

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

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

ויש עוד אינסוף דוגמאות.

למה הכוונה ב-shortcode?

מדובר על טקסטים מהצורה [הזו], כלומר השימוש בהם הוא בעזרת טקסט בתוך סוגריים מרובעים.

למעשה יש 4 סוגים של קיצורי דרך בהם וורדפרס תומכת:

  1. הפשוט – [shortcode]
  2. בעל הפרמטרים – [shortcode data='abc']
  3. בעל התוכן – [shortcode]data data data[/shortcode]
  4. המשולב – [shortcode data='abc'] bla bla bla[/shotrcode]

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

אז איך משתמשים?

ההגדרה בוורדפרס של קיצורי דרך שכאלו היא ממש פשוטה

1
2
3
4
5
function mypic($atts) {
    return <img src="http://example.com/wordpress/wp-content/uploads/2009/08/mypic.jpg" alt="my picture" />
}

add_shortcode('[pic]', 'mypic');

הקוד למעלה יוסיף את התמונה mypic.jpg בכל מקום בטקסט בו יופיע הקיצור [mypic]

דוגמה נוספת בעלת שימוש בפרמטרים:

1
2
3
4
5
6
7
function pic_shortcode($atts) {
    extract(shortcode_atts(array(
        'alt' =&amp;gt; 'none'
            ), $atts));
    return "<img src="my-url" alt="$alt" />\n";
}
add_shortcode('[pic]', 'mypic');

והשימוש:
[pic alt='my alter ego']

דוגמה לשימוש עם תוכן:

1
2
3
4
5
6
7
8
9
function pic_shortcode($atts, $content='') {
    extract(shortcode_atts(array(
        'alt' =&amp;gt; 'none'
            ), $atts));
    return "<img src="my-url" alt="$alt" />
<div class="text-over">$content</div>
\n";
}
add_shortcode('[pic]', 'mypic');

והשימוש:
[pic]התוכן שלי[/pic]

דוגמאות מהחיים:

תמונות לפי נושאים

נייצר את הקיצור הבא:
[משחקים]

1
2
3
4
5
6
7
function games_shortcode($atts) {
    extract(shortcode_atts(array(
        'alt' =&amp;gt; 'none'
            ), $atts));
    return "<img src="my-url" alt="$alt" />\n";
}
add_shortcode('[משחקים]', 'games_shortcode');

זה למעשה זהה לגרסה הראשונה שראינו
אבל מה אם יש לנו מספר נושאים שכאלו ?
הנה הפתרון
[subject type='משחקים']

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function subject_shortcode($atts) {
    extract(shortcode_atts(array(
        'type' =&amp;gt; 'none'
            ), $atts));
    switch ($type) {
        case 'משחקים':
              $url='games-image-url';
              break;
        case 'עבודה':
              $url = 'work-image-url';
              break;
        case 'none':
              $url = '';
    }
    if (is_empty($url))
        return '';
    else
        return "<img src="$url" alt="$alt" />\n";
}
add_shortcode('[subject]', 'subject_shortcode');

הוספת מודעות גוגל

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function adsense_shortcode( $atts ) {
    extract(shortcode_atts(array(
        'format' =&amp;gt; '1',
         ), $atts));

    switch ($format) {
        case 1 :
            $ad = '<script type="text/javascript"><!--mce:0--></script>
              <script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"><!--mce:1--></script>';
          break;
    }
    return $ad;
}

add_shortcode('adsense', 'adsense_shortcode');

הגעתם עד הנה ? מצויין.
שאלות, טענות, הארות – בתגובות.
מקווה שעזר.

עוד טקסטים בנושא:

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

רשימת קישורים מופרדת בפסיקים

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

לוורדפרס יש פונקציה מובנית שמאפשרת לקבל רשימת קישורים ממשק הקישורים של המערכת.
הדבר היחיד שלא הצלחתי עד כה לעשות בעזרתה בקלות הוא רשימות המופרדות ב-פסיקים\נקודות\מקפים\משהו…

יש פתרון
הקוד לרשימת הקישורים הוא:

1
2
3
4
5
6
7
</p>
<div class="links">
<ul>
        < ? wp_list_bookmarks("title_li=&category=2"); ?>
    </ul>
</div>
<p>

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

הקוד שנקבל כתוצאה מהפונקציה הוא:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
</p>
<div class="links">
<ul>
<li><a href="http://art-blog.no-ip.info/newpress/blog/">ארתיום טונקיך</a></li>
<li><a href="http://www.dakars.info/">חנית כהן</a></li>
<li><a href="http://firefang.net/blog/">עמרי ידן</a></li>
<li><a href="http://tzafrir.net/">צפריר ריהן</a></li>
<li><a href="http://ranh.co.il/">רן יניב הרטשטיין</a></li>
<li><a href="http://blog.shemesh.biz/">שחר שמש</a></li>
<li><a href="http://www.my-paradox.net/">שרית עמר</a></li>
<li><a href="http://www.dontsmile.info">תום סלע</a></li>
</ul>
</div>
<p>

עכשיו נותר רק להוסיף את העיצוב (כן, כאן יתווספו לנו הפסיקים):

1
2
3
4
5
6
7
8
9
.links ul {
    list-style: none;
    margin: 0 0 1.5em 0;
    padding: 0;
}
.links ul li { display: inline; }
.links ul li:after { content: " , "; }
.links ul li:last-child:after { content: ""; }
.links a {color:#fff; font-size:13px; font-weight: normal;}

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

1
2
3
4
5
6
<div class="links">
    <ul>
        <li class="first"><a href="<?bloginfo('url');?>">דף הבית</a></li>
        < ? wp_list_bookmarks("title_li=&#038;category=2"); ?>
    </ul>
</div>

סימנו את האיבר הראשון בצורה יחודית ולכן ה-css ייראה כך:

1
2
3
4
5
6
7
8
.links ul {
    list-style: none;
    margin: 0 0 1.5em 0;
    padding: 0;
}
.links ul li { display: inline; border-right: 1px solid #f5f5f5;}
.links ul li.first { border-right: none;}
.links a {color:#fff; font-size:13px; font-weight: normal;}

הפתרון האחרון הוא תוכנתי:
נוסיף לקובץ functions.php את הפונקציה הבאה:

1
2
3
4
5
6
7
8
9
10
11
function mylinks($args, $sep) {
    $links=get_bookmarks($args);
    $first = true;
    foreach ($links as $link) {
        if ($first)
            $first=false;        
        else
            echo $sep;
        echo "<li><a href='".$link->link_url."'>".$link->link_name."</a></li>\n";
    }
}

עכשיו נקרא לה במקום הרלוונטי בתבנית:

1
2
3
4
5
<div class="links">
    <ul>
        < ? mylinks("category=2", ","); ?>
    </ul>
</div>

והעיצוב ייראה כך:

1
2
3
4
5
6
7
.links ul {
    list-style: none;
    margin: 0 0 1.5em 0;
    padding: 0;
}
.links ul li { display: inline;}
.links a {color:#fff; font-size:13px; font-weight: normal;}

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

פילטרים בוורדפרס – קוד שימושי

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

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

כיווניות תגובות

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

1
2
3
4
5
6
7
8
9
10
11
12
/* Comments directionality filter */
add_filter('comment_text', 'lang_dir');

function lang_dir($content) {
    $eng = preg_match_all('/[a-zA-Z].?/', $content, $matches);
    $heb = preg_match_all('/[א-תץףךםן].?/', $content, $matches);
    if ($eng > $heb) {
        return "&lt;div class='lcomment'>&lt;p>$content &;lt;/p>&lt;/div>";
    } else {
        return "&lt;div class='rcomment'>&lt;p>$content&lt;/p>&lt;/div>";
    }
}

כמובן שצריך להוסיף גם את קוד ה-css הבא:

1
2
3
4
5
6
7
8
.lcomment {
    direction: ltr;
    text-aliggn: left;
}
.rcomment {
    direction: rtl;
    text-align: right;
}

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

מחליף שפות

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
/* Language 'plugin' for the theme */
function ShowHideJs() {
?>
&lt;script>
function setElementVisibility(eShow, eHide){
    document.getElementById(eShow).style.visibility = "visible";
    document.getElementById(eShow).style.display = "block";
    document.getElementById(eHide).style.visibility = "hidden";
    document.getElementById(eHide).style.display = "none";
}

function ShowHeb(){
    setElementVisibility("heb", "eng");
}

function ShowEng(){
    setElementVisibility("eng", "heb");
}
&lt;/script>
&lt;?
}

function add_buttons($content) {
    if ((strstr($content, "[heb]") !== false) && (strstr($content, "[eng]") !== false)) {
                $hebbtn = get_bloginfo('template_url')."/img/hBtn";
                $engbtn = get_bloginfo('template_url')."/img/eBtn";
        $buttons .= "&lt;img src='".$engbtn.".png'  onMouseover='this.src=\"".$engbtn."_Hover.png\"' onMouseout='this.src=\"".$engbtn.".png\"' onClick='ShowEng()' />\n";
        $buttons .= "&lt;img src='".$hebbtn.".png'  onMouseover='this.src=\"".$hebbtn."_Hover.png\"' onMouseout='this.src=\"".$hebbtn.".png\"' onClick='ShowHeb()' />\n";
        return "&lt;div id='lang'>".$buttons."".$content;
    }
    return $content;
}

function heb($content) {
    return str_replace ("[/heb]", "&lt;/div>",
        str_replace("[heb]", "&lt;div id='heb' name='heb' style='visibility:display;'>", $content));
}

function eng($content) {
    return str_replace ("[/eng]", "&lt;/div>",
        str_replace("[eng]", "&lt;div id='eng' style='visibility:hidden; display:none;'>", $content));
}

add_filter('wp_head', 'ShowHideJs');
add_filter('the_content', 'add_buttons');
add_filter('the_content', 'eng');
add_filter('the_content', 'heb');

שימו לב שהקוד למעלה משתמש במספר פילטרים שונים:

  1. פילטר JS שיושב בהדר של העמוד
  2. פילטר שמוסיף את כפתורי השפה
  3. פילטר אנגלית, פילטר עברית

את השנים האחרונים היה נניתן כמובן לשלב לפילטר יחיד, אבל אני החלטתי שזה יותר יפה כך :-)

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

ויש עוד לא מעט כאלו :-)

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