ככה יוצרים ממשק הגדרות משלכם בוורדפרס

צריכים לאפשר למשתמש וורדפרס להכניס טקסט או לקבוע משהו אחר בתבנית? אל תשתמשו ב-hard code אלא צרו ממשק משתמש משלכם!
לוגו וורדפרס

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

מה הפתרון? דף הגדרות פשוט שבפשוטים שבו אפשר להכניס שפע של הגדרות עבור הלקוח החביב – הוא רוצה לשנות מחרוזת טקסט? שישנה אותה בעצמו. כך אתם תחסכו תמיכה, תספקו מוצר הרבה יותר טוב ובטווח הארוך הלקוח יפנה אליכם שוב. איך יוצרים ממשק הגדרות משלכם? בת'כלס הייתי מסביר פה על ה-Hookים הנוחים של וורדפרס, אבל אני יודע שרוב אלו שיגיעו ירצו רק את הקוד – אז הנה הוא עם הערות הסבר.
הקוד כמובן אמור להיות ב-functions.php של התבנית שלכם (או תבנית הבת). על מנת לא להסגיר שהעתקתם את הקוד מכאן 😉 תחליפו את MY_THEME בשם של התבנית שלכם.
אני אסביר יותר בפרוטרוט בהמשך.


<?php 

//Using hook admin_init to call to MY_THEME_register_settings
add_action( 'admin_init', 'MY_THEME_register_settings' );

//registering the settings
function MY_THEME_register_settings() {
    register_setting( 'MY_THEME_settings', 'MY_THEME_options', 'MY_THEME_validate_options' );
}

//This action is used to add extra submenus and menu options to the admin panel's menu structure.
//It runs after the basic admin panel menu structure is in place.
add_action( 'admin_menu', 'MY_THEME_theme_options' );

// Add theme options page to the admin menu
function MY_THEME_theme_options() {
    add_theme_page( 'Theme Options', 'Theme Options', 'edit_theme_options', 'theme_options', 'MY_THEME_theme_options_page' );
}

// Function to generate options page - Spaghetti code ahead
function MY_THEME_theme_options_page() {

    // Default options values
    $MY_THEME_options = array(
        'MY_THEME_header_text' => '',
    );

    if ( !isset( $_REQUEST['updated'] ) )
        $_REQUEST['updated'] = false; ?>

    <div class="wrap">
        <?php if ( false !== $_REQUEST['updated'] ) : ?>
            <div class="updated fade"><p><strong><?php _e( 'Options saved' ); ?></strong></p></div>
        <?php endif; ?>

        <form method="post" action="options.php">

            <?php $settings = get_option( 'MY_THEME_options', $MY_THEME_options ); ?>

            <?php settings_fields( 'MY_THEME_settings' ); //Very important - print hidden strings?>

            <h2>Header</h2>
            <input type="text" id="MY_THEME_header_text" name="MY_THEME_options[MY_THEME_header_text]" value="<?php print $settings['MY_THEME_header_text']?>" />
            <input type="submit" class="button-primary" value="Save Options" />
        </form>
    </div>

<?php
}

//This function should be used for validating the input
function MY_THEME_validate_options( $input ) {
    return $input;
}

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

מה שיש פה זו שרשרת של כמה פונקציות שכולן קוראות אחת לשניה.


add_action( 'admin_init', 'MY_THEME_register_settings' );

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



function MY_THEME_register_settings() {
    register_setting( 'MY_THEME_settings', 'MY_THEME_options', 'MY_THEME_validate_options' );
}

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

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


settings_fields( 'MY_THEME_settings' ); //Very important - print hidden strings

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

ואיך אני קורא להגדרות שלי? אפשר כבר לראות בקוד שיש קריאה להגדרה בשדה ה-input שאמור להציג משהו אם יש את ההגדרה הזו:


$settings = get_option('MY_THEME_options');

כאשר מתקבל מערך של כל ההגדרות. במקרה הזה יש לי רק הגדרה אחת כמובן, אבל אין שום מניעה להוסיף שדות נוספים (רק אל תשכחו לשנות להם את ה-id ואת ה-name ולהיות עקביים! בדיוק כמו בדוגמה). זה לא כואב ואפילו נחמד. אפשר להוסיף כמובן יותר מטקסט ולשים גם select box. כמו למשל הקוד הבא:


<?php 
function get_pages_as_list() {
    $pages_raw = get_pages();
    foreach( $pages_raw as $page ) :
        $pages[$page->ID] = array(
            'value' => $page->ID,
            'label' => $page->post_title
        );
    endforeach;
    return $pages;
}
$MY_THEME_pages = get_pages_as_list();
?>
<select id="page_parent" name="MY_THEME_options[page_parent]">
	<?php
	foreach ( $MY_THEME_pages as $page ) :
        $label = $page['label'];
        $selected = '';
        if ($page['value'] == $settings['page_parent']) {
            $selected = 'selected="selected"';
        }
        print "<option value='{esc_attr($page[value])}' $selected > $label </option>";
    endforeach;
	?>
</select>

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

פוסטים נוספים שכדאי לקרוא

תמונה מצוירת של רובוט שמנקה HTML
יסודות בתכנות

סניטציה – למה זה חשוב

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

גלילה לראש העמוד