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

ביטול ה Lightbox הדיפולטיבי בווקומרס 3.0+

הנה דרך קצרה לבטל את אפשרות ה Lightbox בווקומרס 3.0 ומעלה. הוסיפו את הקוד הבא לקובץ functions.php:

add_action( 'after_setup_theme', 'remove_wc_gallery_lightbox', 100 );

function remove_wc_gallery_lightbox() { 
  remove_theme_support( 'wc-product-gallery-lightbox' );
}

לעוד התאמות לווקומרס, תנו מבט במדריך שימוש בהוקים של ווקומרס.

הסרת הגירסה של וורדפרס ב Header

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

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

// remove version info from head and feeds
function sv_complete_version_removal() {
    return '';
}
add_filter('the_generator', 'sv_complete_version_removal');

הפניית נרשמים חדשים לעמוד ספציפי

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

function sv_registration_redirect(){
    return home_url( '/finished/' );
}
add_filter( 'registration_redirect', 'sv_registration_redirect' );

מידע על הפניות הקשור בעקיפין לנושא זה ניתן למצוא בפוסט הפניות 301 קבועות וחשיבותן מבחינת קידום אתרים ו SEO.

כיצד לאפשר לתורמים (Contributors) להעלות תמונות

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

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


function sv_allow_contributor_uploads() {
    $contributor = get_role('contributor');
    $contributor->add_cap('upload_files');
}

if (current_user_can('contributor') && !current_user_can('upload_files'))
    add_action('admin_init', 'sv_allow_contributor_uploads');

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

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

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

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

function catch_that_image() {
  global $post, $posts;
  $first_img = '';
  ob_start();
  ob_end_clean();
  $output = preg_match_all('/<img.+?src=['"]([^'"]+)['"].*?>/i', $post->post_content, $matches);
  $first_img = $matches[1][0];

  if(empty($first_img)) {
    $first_img = "/path/to/default.png";
  }
  return $first_img;
}

ובכדי להשתמש בזה בתוך הלולאה של וורדפרס:

if ( get_the_post_thumbnail($post_id) != '' ) {

  echo '<a href="'; the_permalink(); echo '" class="thumbnail-wrapper">';
   the_post_thumbnail();
  echo '</a>';

} else {

 echo '<a href="'; the_permalink(); echo '" class="thumbnail-wrapper">';
 echo '<img src="';
 echo catch_that_image();
 echo '" alt="" />';
 echo '</a>';

}

לעוד על ניהול תמונות בוורדפרס, תנו מבט בכיצד לשלוט על גודל התמונות בוורדפרס.

הוספת שם הקטגוריה ל body_class

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

אך משום מה וורדפרס אינה מוסיפה קלאס המתאר באיזו קטגוריה (או קטגוריות) אתם נמצאים בעמוד פוסט יחיד (נאמר single.php). בכדי להוסיך את השם (היפה) של הקטגוריה לאותה תגית body ניתן להשתמש בקוד הבא:

function sv_add_category_to_single($classes) {
    if (is_single() ) {
        global $post;
        foreach((get_the_category($post->ID)) as $category) {
            // add category slug to the $classes array
            $classes[] = $category->category_nicename;
        }
    }
    // return the $classes array
    return $classes;
}
add_filter('body_class','sv_add_category_to_single');

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

קבלת הקישור לתמונה הראשית (featured image url)

כדי לקבל את הקישור (URL) לתמונה הראשית (featured image) בוורדפרס, השתמשו בפונקציה get_the_post_thumbnail_url(). היא מחזירה רק את כתובת התמונה, ולא תגית <img> מלאה, וזה בדיוק מה שאתם צריכים עבור background-image ב-CSS, תגית Open Graph או סליידר ב-JavaScript.

לעומת זאת, הפונקציה get_the_post_thumbnail() מחזירה את אלמנט התמונה המלא, והיא הבחירה הנכונה כשאתם רוצים תגית <img> עם srcset. כשאתם צריכים רק את הכתובת, השתמשו בסניפטים הבאים.

קבלת הקישור לתמונה הראשית

הוסיפו את הקוד הבא בתוך הלולאה של וורדפרס, בקובץ תבנית כמו single.php או ב-template part:

<?php
if ( has_post_thumbnail() ) {
    $thumb_url = get_the_post_thumbnail_url( get_the_ID(), 'large' );
    ?>
    <div class="post-hero" style="background-image: url('<?php echo esc_url( $thumb_url ); ?>');"></div>
    <?php
}
?>

המשתנה $thumb_url יכיל את הקישור לתמונה הראשית של הפוסט הנוכחי בגודל large.

איך זה עובד?

הפונקציה get_the_post_thumbnail_url( $post, $size ) קיימת בליבת וורדפרס מאז גרסה 4.4 (ראו את התיעוד של הפונקציה). שני הפרמטרים אופציונליים:

  • $post: מזהה (ID) של פוסט או אובייקט WP_Post. כברירת מחדל, הפוסט הגלובלי שבלולאה.
  • $size: שם רשום של גודל תמונה, כמו thumbnail, medium, large או full, או מערך של רוחב וגובה. ברירת המחדל היא post-thumbnail.

הפונקציה מחזירה false אם לפוסט אין תמונה ראשית, לכן בדקו קודם עם has_post_thumbnail().

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

כדי להדפיס את הכתובת ישירות, the_post_thumbnail_url( 'large' ) מדפיסה אותה לאחר שכבר עברה escaping. שימו לב שהתיבה ״תמונה ראשית״ (Featured Image) מופיעה בעורך רק אם התבנית שלכם מצהירה על add_theme_support( 'post-thumbnails' ) בקובץ functions.php.

מחוץ ללולאה או לפי מזהה פוסט

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

$thumb_url = get_the_post_thumbnail_url( 42, 'full' );

אם אתם צריכים גם את מידות התמונה, קבלו קודם את מזהה הקובץ המצורף (attachment) והשתמשו ב-wp_get_attachment_image_src():

$thumb_id = get_post_thumbnail_id( 42 );
$image    = wp_get_attachment_image_src( $thumb_id, 'large' );

if ( $image ) {
    list( $url, $width, $height ) = $image;
}

אם אתם צריכים רק את הכתובת לפי מזהה הקובץ המצורף, wp_get_attachment_image_url( $thumb_id, 'large' ) היא הגרסה הקצרה יותר.

הקישור לתמונה הראשית דרך ה-REST API

אובייקט פוסט שמגיע מה-REST API כולל רק את featured_media, כלומר את מזהה הקובץ המצורף. הוסיפו _embed=wp:featuredmedia כדי לקבל את נתוני התמונה באותה בקשה:

fetch( '/wp-json/wp/v2/posts?_embed=wp:featuredmedia' )
    .then( ( response ) => response.json() )
    .then( ( posts ) => {
        posts.forEach( ( post ) => {
            const media = post._embedded?.[ 'wp:featuredmedia' ]?.[ 0 ];
            const url   = media?.source_url;                        // original image
            const large = media?.media_details?.sizes?.large?.source_url; // large size, if generated
            console.log( post.id, url, large );
        } );
    } );

הגבלת _embed לקשר (relation) אחד נתמכת מאז וורדפרס 5.4, כפי שמתואר בתיעוד REST API global parameters.

אם אתם משתמשים גם ב-_fields, כללו ברשימה את _links ואת _embedded, אחרת ה-embed לא יתבצע. לדוגמה מלאה, ראו את הפוסט הצגת פוסטים מבלוג אחר באתר שלכם באמצעות REST API.

שאלות נפוצות

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

איך מקבלים את הקישור לתמונה הראשית בגודל המלא?
העבירו 'full' כגודל: get_the_post_thumbnail_url( get_the_ID(), 'full' ). כך תקבלו את הכתובת של התמונה שהועלתה ולא של עותק מוקטן שלה.
למה get_the_post_thumbnail_url מחזירה false?
לפוסט לא הוגדרה תמונה ראשית, או שהפונקציה בודקת פוסט אחר מזה שאתם מצפים לו. מחוץ ללולאה הפוסט הגלובלי לא בהכרח יהיה הפוסט שאתם רוצים, ולכן העבירו את מזהה הפוסט במפורש.
מה ההבדל בין get_the_post_thumbnail לבין get_the_post_thumbnail_url?
get_the_post_thumbnail() מחזירה תגית <img> מלאה עם srcset, alt ומידות. get_the_post_thumbnail_url() מחזירה רק את מחרוזת הכתובת.
היכן נמצא source_url בתגובה של ה-REST API?
עם _embed, הוא נמצא ב-_embedded['wp:featuredmedia'][0].source_url. גרסאות בגדלים אחרים נמצאות תחת media_details.sizes, כל אחת עם source_url משלה.

הוספת קלאס לקישורים המיוצרים ע״י next_posts_link ו previous_posts_link

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

add_filter('next_posts_link_attributes', 'posts_link_attributes');
add_filter('previous_posts_link_attributes', 'posts_link_attributes');

function posts_link_attributes() {
  return 'class="styled-button"';
}

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

שינוי סדר הפוסטים עבור ארכיון (archive.php)

הדרך הפשוטה ביותר לשנות את סדר הפוסטים בעמוד המשתמש בקובץ archive.php יהיה להשתמש בהוק pre_get_posts. עליכם במקרה זה לוודא שהשאילתא (query) היא זו לה אתם רוצים לבצע את השינוי כמובן.

שימוש בתנאי is_archive או is_post_type_archive אמור לספק במקרה זה. הנה דוגמה:

function sv_change_sort_order($query){
    if(is_archive()):
        //If you wanted it for the archive of a custom post type use: is_post_type_archive( $post_type )
        //Set the order ASC or DESC
        $query->set( 'order', 'ASC' );
        //Set the orderby
        $query->set( 'orderby', 'title' );
    endif;
}
add_action( 'pre_get_posts', 'sv_change_sort_order');

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

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

שינוי כתובת החיפוש של וורדפרס

כברירת מחדל וורדפרס משתמשת בפרמטר "s" כ Query String על מנת לבצע חיפוש באתר. במקרים מסויימים תרצו לשנות פרמטר זה למחרוזת שונה. ניתן לעשות זאת בקלות על ידי הפונקציה הבאה:

function change_search_url_rewrite() {
    if ( is_search() && ! empty( $_GET['s'] ) ) {
        wp_redirect( home_url( "/search/" ) . urlencode( get_query_var( 's' ) ) );
        exit();
    }
}
add_action( 'template_redirect', 'change_search_url_rewrite' );

לאחר הוספת פונקציה זו, כתובת החיפוש תהיה serach/test במקום ?s=test