עריכת תבניות קיימות בוורדפרס

אוגוסט 3, 2015
דוגמה למבנה תיקיות הכולל Child Theme

דוגמה למבנה תיקיות הכולל Child Theme

אני רוצה לגעת בקצרה על שינוי תבניות מוכנות במערכת וורדפרס, כמו אלו שאפשר להתקין דרך עמוד עיצוב – תבניות או ערכות העיצוב ברירת המחדל TwentyThirteen, TwentyFourteen, TwentyFifthteen
עריכה ישירה שלהן היא לא הדרך המומלצת לערוך אותן מאחר וכשמעדכנים את התבנית/עיצוב כל השינויים שעשינו יתאפסו.
אז מה עושים במקרה כזה שרוצים להשתמש בתבנית מוכנה אך רוצים לשנות כמה דברים קטנים (או אפילו גדולים)? אנחנו יכולים להשתמש ב- Child Themes.

 

מה אנחנו צריכים כדי להתחיל?

כל מה שאנחנו צריכים זה תיקיה וקובץ CSS.
בד”כ לתיקיה קוראים באותו השם של ערכת העיצוב המקורית בתוספת -child, לדוגמה twentyfifteen-child ואנחנו יוצרים אותה תחת תיקית העיצובים של וורדפרס (wp-content/themes)
בקובץ ה- CSS אנחנו צריכים שתופיע לפחות הערת המידע אשר קובעת את פרטי התבנית.
את שם התבנית המקורית אנחנו נרשום בהגדרה Template, לדוגמה: Template: twentyfifteen
את שאר ההגדרות נעדכן על פי הפרטים שלנו:

אנחנו שומרים את הקובץ בשם style.css בתיקיה שיצרנו לעיצוב.
גם אם אנחנו לא רוצים להשתמש בקובץ style.css אנחנו מחוייבים ליצור את הקובץ הזה ושפרטי התבנית יופיעו בו

/*
 Theme Name:   Twenty Fifteen Child
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Twenty Fifteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfifteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-fifteen-child
*/

 

הלאה, עריכת CSS קיים!

לפני שנוכל לערוך את ה- CSS של ערכת העיצוב אנחנו צריכים לטעון אותו.
יש לנו 2 אפשרויות כיצד לבצע זאת:

  1. להשתמש ב- @import בקובץ ה- CSS שלנו. לדוגמה:
    @import url(../twentyfifteen/style.css);
  2. להשתמש בפונקציית enqueue_styles בקובץ ה- functions.php (הדרך המומלצת)
    add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
    function theme_enqueue_styles() {
        wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    
        // ואם לא טענו את קובץ ה- CSS של תבנית הבת שלנו בדרך אחרת:
        wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css' );
    }

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

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

 

אני צריך לשנות את מבנה הפוסט. מה אני עושה?

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

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
	<header class="entry-header">
    <h1 class="entry-title">
      <?php the_title(); ?>
    </h1>
  </header>
  <div class="entry-content">
    <?php the_content(); ?>
  </div>
</article>

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

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
	<header class="entry-header">
    <h1 class="entry-title">
      <?php the_title(); ?>
    </h1>
    <div class="entry-meta">
      This post was written by <?php the_author(); ?>
    </div>
  </header>
  <div class="entry-content">
    <?php the_content(); ?>
  </div>
</article>

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

 

להסבר מלא על Child Themes ניתן לעיין בעמוד הדוקומנטציה של וורדפרס על הנושא

תגובה אחת to “עריכת תבניות קיימות בוורדפרס”

  1. אני לא מאמין שאתם עדיין חיים! P:

השאר תגובה