Προσθήκη Customizer στο θέμα WordPress

Προσθέστε το Customizer στο θέμα σας WordPress με όλους τους τύπους επιλογών όπως εισαγωγή κειμένου, ραδιόφωνο, πλαίσιο ελέγχου. Τα πάντα για το API προσαρμογής.

Πώς να προσθέσετε Customizer στο WordPress Theme

Εμείς πρέπει να customize_register δράση και ορισμένες συναρτήσεις με PHP Classes. Διαβάστε περισσότερα για API προσαρμογής.

Προσθήκη Customizer

Αντιγράψτε αυτόν τον κωδικό και επικολλήστε τον „functions.php“ αρχείο στο θέμα σας ή δημιουργήστε ένα νέο αρχείο για παράδειγμα „customizer.php“ και συμπεριλάβετέ το στο θέμα σας, διαβάστε αυτήν την ανάρτηση σχετικά με τη συμπερίληψη αρχείου PHP στο θέμα WordPress.

function add_customizer($wp_customize) {
    //Enter the options code below:

    //End.
}
add_action( 'customize_register', 'add_customizer' );

Μια επιλογή χρώματος

Σε αυτό το παράδειγμα, θα μάθουμε πώς να προσθέτουμε επιλογή χρώματος, για παράδειγμα μια επιλογή για αλλαγή „Σώμα“ χρώμα του φόντου. Αντιγράψτε τον κωδικό και επικολλήστε τον μέσα add_customizer() λειτουργία:

/* Customizer API | By Qassim Hassan | wp-time.com */

// Add a new section (Body section)
$wp_customize->add_section( 'ct_body_section', array(
    'title' => 'Body'
) );

// Add a new option to Body Section
$wp_customize->add_setting( 'op_body_bg_color', array(
    'type' => 'option',
    'default' => '#ffffff', // the default value, you can change it.
    'transport' => 'refresh',
    'sanitize_callback' => 'sanitize_hex_color'
) );

// Color option control
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'op_body_bg_color', array(
    'label' => 'Background Color',
    'section' => 'ct_body_section',
    'description' => 'Change body background color.',
    'settings' => 'op_body_bg_color'
) ) );

Το αποτέλεσμα είναι:

Τώρα χρησιμοποιήστε αυτόν τον κωδικό για να εμφανίσετε το στυλ χρώματος φόντου του σώματος στο θέμα σας, αντιγράψτε τον κώδικα και επικολλήστε τον „functions.php“ αρχείο ή το δικό σας „customizer.php“ αρχείο:

function body_background_color_style(){
    // By Qassim Hassan | wp-time.com
    if( get_option('op_body_bg_color') ){
        ?>
            <style type="text/css">
                body{
                    background-color: <?php echo get_option('op_body_bg_color'); ?>;
                }
            </style>
        <?php
    }
}
add_action('wp_head', 'body_background_color_style');

Μια επιλογή μεταφόρτωσης

Σε αυτό το παράδειγμα, θα μάθουμε πώς να προσθέτουμε την επιλογή Image Uploader, για παράδειγμα μια επιλογή για να ανεβάσετε το λογότυπό σας. Αντιγράψτε τον κωδικό και επικολλήστε τον μέσα add_customizer() λειτουργία:

/* Customizer API | By Qassim Hassan | wp-time.com */

// Add a new section (Logo section)
$wp_customize->add_section( 'ct_logo_section', array(
    'title' => 'Logo'
) );

$wp_customize->add_setting( 'op_logo_url', array(
    'type' => 'option',
    'default' => '',
    'transport' => 'refresh',
    'sanitize_callback' => 'esc_url_raw'
) );

$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'op_logo_url', array(
    'label' => 'Upload Logo',
    'section' => 'ct_logo_section',
    'description' => 'Upload your logo image.',
    'settings' => 'op_logo_url'
) ) );

Το αποτέλεσμα είναι:

Χρησιμοποιήστε αυτόν τον κωδικό όπου θέλετε να εμφανίσετε το λογότυπο:

<?php if ( get_option('op_logo_url') ) : ?>
    <img src="<?php echo esc_url( get_option('op_logo_url') ); ?>">
<?php endif; ?>

Περισσότερες επιλογές

Όλοι οι τύποι επιλογών, όπως εισαγωγή κειμένου, ραδιόφωνο, πλαίσιο ελέγχου, περιοχή κειμένου, με επιλογές απολύμανσης και ένα παράδειγμα εξόδου, το βρίσκετε στο αυτό το αρχείο.