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

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

רן בר-זיק מאי 11, 2014 2:00 pm אין תגובות

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

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

מה הפתרון? דף הגדרות פשוט שבפשוטים שבו אפשר להכניס שפע של הגדרות עבור הלקוח החביב – הוא רוצה לשנות מחרוזת טקסט? שישנה אותה בעצמו. כך אתם תחסכו תמיכה, תספקו מוצר הרבה יותר טוב ובטווח הארוך הלקוח יפנה אליכם שוב. איך יוצרים ממשק הגדרות משלכם? בת'כלס הייתי מסביר פה על ה-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>

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
וורדפרס

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

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