אני רוצה לגעת בקצרה על שינוי תבניות מוכנות במערכת וורדפרס, כמו אלו שאפשר להתקין דרך עמוד עיצוב – תבניות או ערכות העיצוב ברירת המחדל 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 אפשרויות כיצד לבצע זאת:
- להשתמש ב-
@import
בקובץ ה- CSS שלנו. לדוגמה:
@import url(../twentyfifteen/style.css);
- להשתמש בפונקציית
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 ניתן לעיין בעמוד הדוקומנטציה של וורדפרס על הנושא