ארכיונים: Snippets | עמוד 7

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

<link rel=’dns-prefetch’ href='//s.w.org'/>
<link rel='dns-prefetch' href='//fonts.googleapis.com'/>

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

בכדי להסיר אלו הוסיפו את הקוד הבא לקובץ functions.php של התבנית שלכם:

function remove_dns_prefetch () {
    remove_action( 'wp_head', 'wp_resource_hints', 2, 99 );
}
add_action( 'init', 'remove_dns_prefetch' );

אם אינכם יודעים, הנה פוסט המסביר מה זה DNS.

כדי להגביל טקסט למספר קבוע של שורות ב-CSS, השתמשו בתכונה -webkit-line-clamp. הטקסט נחתך אחרי השורה האחרונה שהוגדרה, ונוספות בסופו שלוש נקודות (…), כך שתקצירים בכרטיסים, כותרות מוצרים ותיאורים נשארים בגובה אחיד.

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

קוד CSS להגבלת טקסט ל-N שורות

הוסיפו את הקוד הבא לקובץ העיצוב שלכם (בוורדפרס, לקובץ style.css של תבנית הבת או בעיצוב > התאמה אישית > CSS מותאם) ושנו את המספר למספר השורות שתרצו להציג:

.text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* number of lines to show */
    overflow: hidden;
}

וזה ה-Markup, למשל:

<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consectetur venenatis blandit. Praesent vehicula, libero non pretium vulputate, lacus arcu facilisis lectus, sed feugiat tellus nulla eu dolor. Nulla porta bibendum lectus quis euismod.
</div>

כיצד line-clamp עובד

שלוש התכונות עם הקידומת חייבות לעבוד יחד. ל--webkit-line-clamp אין שום השפעה אלא אם לאלמנט מוגדרים גם display: -webkit-box (או -webkit-inline-box) וגם -webkit-box-orient: vertical.

• -webkit-line-clamp: 2 קובע את מספר השורות המרבי ומוסיף את שלוש הנקודות בסוף השורה האחרונה.
• overflow: hidden מסתיר את השורות שאחרי המגבלה. בלעדיו שלוש הנקודות יופיעו, אבל שאר הטקסט עדיין יהיה גלוי.
• text-overflow: ellipsis אינו נחוץ בגרסה מרובת השורות. שלוש הנקודות מגיעות מ-line-clamp עצמו.

הקידומת אולי נראית מיושנת, אבל זו הגרסה שעובדת. -webkit-line-clamp נתמך ב-Chrome, Edge, Safari ו-Firefox (החל מ-Firefox 68), ו-MDN מציין שהשילוב הזה של תכונות ימשיך להיות נתמך.

התכונה line-clamp ללא קידומת קיימת במפרט ה-CSS, אבל נכון ל-2026 אף גרסה יציבה של דפדפן לא תומכת בה. היא זמינה רק בגרסאות Preview או מאחורי flags, אז אל תשתמשו בה לבדה בינתיים.

הגבלת טקסט לשורה אחת עם שלוש נקודות

לשורה אחת אין צורך ב-line-clamp. הגישה הקלאסית עם text-overflow עובדת בכל הדפדפנים:

.text-one-line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

text-overflow לא יוצר את הגלישה בעצמו. צריך להכריח את הטקסט להישאר בשורה אחת עם white-space: nowrap, ולאלמנט צריך להיות רוחב מוגבל (אלמנט בלוק, או inline-block עם רוחב מוגדר).

בעיות נפוצות

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

• השורה הבאה מציצה בתחתית. padding אנכי על האלמנט חושף חלק מהשורה המוסתרת, מכיוון ש-overflow: hidden חותך לפי גבול ה-padding. העבירו את ה-padding לאלמנט עוטף.
• שום דבר לא נחתך. כלל אחר דורס את ה-display, למשל display: flex או display: block שמגיע מהתבנית.
• אתם צריכים הגבלה לפי תווים, לא לפי שורות. CSS לא יודע לספור תווים. קצרו את הטקסט בצד השרת: mb_strimwidth() ב-PHP חותך מחרוזת לפי רוחב מוגדר, ו-wp_trim_words() בוורדפרס חותך אותה למספר מילים.

הגבלת שורות משתלבת היטב עם text-wrap: balance ו-pretty עבור כותרות בכרטיסים. לעוד טיפים לאופטימיזציה של CSS, תנו מבט באופטימיזציה של CSS לביצועים טובים יותר.

שאלות נפוצות

הנה כמה שאלות שעולות לא מעט לגבי הגבלת שורות טקסט ב-CSS:

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

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

/**
 * @snippet       ביטול צורת תשלום מסויימת עבור שיטת משלוח ספציפית
 * @author        Roee Yossef
 * @website       https://savvy.co.il
 */
  
  
function sv_gateway_disable_shipping_326( $available_gateways ) {
     
   if ( ! is_admin() ) {
        
      $chosen_methods = WC()->session->get( 'chosen_shipping_methods' );
        
      $chosen_shipping = $chosen_methods[0];
        
      if ( isset( $available_gateways['cod'] ) && 0 === strpos( $chosen_shipping, 'local_pickup' ) ) {
         unset( $available_gateways['cod'] );
      }
        
   }
     
   return $available_gateways;
     
}
add_filter( 'woocommerce_available_payment_gateways', 'sv_gateway_disable_shipping_326' );

אם אתם משתמשים ב PayPal כאפשרות רכישה בעמוד התשלום של ווקומרס, דעו כי באפשרותכם להחליף את הלוגו של פייפאל המוצג בעמוד התשלום. הוסיפו את הקוד הבא לקובץ functions.php של התבנית שלכם:

/**
 * Add custom gateway icons
 *
 * @param string $icon Image HTML.
 * @param string $gateway_id Gateway ID.
 *
 * @return string
 */
function sv_custom_wc_gateway_icons($icon, $gateway_id)
{
    // Example for PayPal:
    if ('paypal' == $gateway_id) {
        $icon = '<img src="' . get_stylesheet_directory_uri() . '/images/paypal.svg" alt="' . __('PayPal') . '" />';
    }
    return $icon;
}

add_filter('woocommerce_gateway_icon', 'sv_custom_wc_gateway_icons', 10, 2);

שנו את הנתיב ואת שם הקובץ לתמונה החדשה ואתם מסודרים!

הקוד הבא מאפשר לכם להאריך את משך הזמן שלוקח עד שוורדפרס מנתקת אתכם אוטומטית מהמערכת, כלומר מממשק הניהול של וורדפרס (Automatic Logout). הוסיפו את הקוד לקובץ functions.php של התבנית שלכם:

function keep_me_logged_in_for_1_year( $expirein ) {
   return 31556926; // 1 year in seconds
}
add_filter( 'auth_cookie_expiration', 'keep_me_logged_in_for_1_year' );

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

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

// Tag cloud custom
function style_tags($args) {
    $args = array(
         'largest'    => '10',
         'smallest'   => '10',
         'format'     => 'list',
         );
    return $args;
}
add_filter('widget_tag_cloud_args', 'style_tags');

לעוד על תגיות וטקסונומיות, תנו מבט בטקסונומיות בוורדפרס.

באפשרותכם להסתיר ממשתמש מסויים תפריטים הקיימים בלוח הבקרה של וורדפרס. החליפו את username בשם המשתמש של האדם ממנו אתם רוצים להסתיר את אותם התפריטים ובזאת סיימתם:

function remove_menus()
{
    global $menu;
    global $current_user;
    get_currentuserinfo();

    if($current_user->user_login == 'username')
    {
        $restricted = array(__('Posts'),
                            __('Media'),
                            __('Links'),
                            __('Pages'),
                            __('Comments'),
                            __('Appearance'),
                            __('Plugins'),
                            __('Users'),
                            __('Tools'),
                            __('Settings')
        );
        end ($menu);
        while (prev($menu)) {
            $value = explode(' ',$menu[key($menu)][0]);
            if(in_array($value[0] != NULL ? $value[0] : "" , $restricted)) {
                unset($menu[key($menu)]);
            }
        } // end while

    } // end if
}
add_action('admin_menu', 'remove_menus');

קוד זה משתמש בהוק של וורדפרס. למידע נוסף בהבנת הוקים בוורדפרס.

הסניפט הבא יאפשר לכם להסיר תיבות Meta Box ספציפיות מהעמוד הראשי בלוח הבקרה (Dashboard) של וורדפרס. מדובר על ה Meta Boxes הדיפולטיביות המוצגות לנו בעמוד הראשי של ממשק הניהול.

בכדי לבטל או לשנות אילו תיבות יוצגו – הוסיפו את הסניפט לקובץ functions.php בתבנית שלכם ובחרו איזה תיבות להסיר:

function my_custom_dashboard_widgets()
{
    global $wp_meta_boxes;

    // Main column (left):
    // Browser Update Required
    unset($wp_meta_boxes['dashboard']['normal']['high']['dashboard_browser_nag']);
    // PHP Update Required
    unset($wp_meta_boxes['dashboard']['normal']['high']['dashboard_php_nag']);
    // Right Now - Comments, Posts, Pages at a glance
    unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_right_now']);
    // Right Now
    unset($wp_meta_boxes['dashboard']['normal']['core']['network_dashboard_right_now']);
    // Activity
    unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_activity']);
    // Site Health Status
    unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_site_health']);

    // Side Column (right):
    // WordPress Events and News
    unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_primary']);
    // Quick Draft, Your Recent Drafts
    unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_quick_press']);

    // Recent Comments
    unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_recent_comments']);

    // Incoming Links
    unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_incoming_links']);

    // Plugins - Popular, New and Recently updated WordPress Plugins
    unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_plugins']);

    // Other WordPress News Feed
    unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_secondary']);


    // Recent Drafts List
    unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_recent_drafts']);
}

add_action('wp_dashboard_setup', 'my_custom_dashboard_widgets');

אני מדבר על העמוד הבא אם זה לא היה ברור:

להתאמות בטוחות בממשק הניהול, תנו מבט במה זה תבנית בת וכיצד להשתמש בה.

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

function any_ptype_on_cat($request) {

    if ( isset($request['category_name']) )
        $request['post_type'] = 'any';

    return $request;
}
add_filter('request', 'any_ptype_on_cat');

לעוד על סוגי תוכן מותאמים, תנו מבט בכיצד ליצור סוגי תוכן מותאמים.