ארכיון התג: קוד

24 כלים לפיתוח אתרים ששווה להכיר

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

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

דפדפנים:

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

  1. Firefox 3.5
  2. FireFox 3.0
  3. IeTester – מהווה פתרון לכל הגרסאות של IE, ספציפית רלוונטי ל6,7,8
  4. Chrome - נוח לשימוש, ובעל כלי דיבג מובנה נח ביותר
  5. Safari – כי צריך :-) הוא מהיר כמעט כמו הכרום ולא לוקה בבעיית הקאשינג המעצבנת של הכרום
  6. IE8 – עדכון של ווינדוז

תוספים שונים:

  1. colorzilla - תוסף המאפשר לדעת את הצבע של כל אלמנט בעמוד, גם תמונות וחלקיהם. מאד שימושי.
  2. measureit - סרגל מדידה.
  3. firebug - תוסף עליו פרסמתי סרטון הדרכה קצר, מאפשר לשנות און לייין את ה-CSS ועוד הרבה מאד. חשוב
  4. web-developer – סרגל כלים שלם לשועל המאפשר פונקציות שונות ושימושיות
  5. Fire Diff – עוקב אחרי השינויים שעשיתם ב-Firebug כך שלא תשכחו אותם
  6. IE Developer Toolbar – כלי ל-IE שאמור להיות המקבילה ל-firebug, הוא לא שם אבל עושה את העבודה כדי לתקן את התצוגה ב-IE

כלי ווב:

  1. browsershots - אתר המאפשר לראות תמונות מסך של האתר בדפדפנים שונים
  2. cssjenous - כלי אוטומטי ההופך את ה-CSSS ל-RTL, עושה את רוב העבודה האוטומטית ומשאיר רק את העבודה הקשה באמת
  3. w3c validator – בודק שהאתר כתוב ב-HTML תקין
  4. w3c feed validator – בודק שפיד ה-RSS תקין
  5. kuler – כלי של adobe המוציא סכמות צבאים מתמונות או מצבע יחיד, מצויין לעיצוב ושפצור

עורכי קוד וכלים נוספים:

  1. notepad++
  2. vim
  3. Geany – המלצה של ניצן, עורך קוד מציין ונעים לעבודה
  4. Expresso - תוכנת עזר לבניית ביטויים רגולריים
  5. ditto -תוכנה המחליפה את ה-clipboard של חלונות, ומאפשרת שמירת העתקות לאורך זמן, שימוש בהם ושיפור פרודוקטיביות
  6. winmerge - תוכנה המאפשרת מיזוג קבצים בצורה חכמה
  7. wingrep - תוכנת חיפוש חזקה מאד, למעשה ממשק מעל ה-grep המוכר והטוב של לינוקס

זהו, זה הסט שלי לעבודה .

במה אתם משתמשים ?

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

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

פורסם בתאריך מאת
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 !

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

פורסם בתאריך מאת
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 !