Teme WordPress personalizate

Cum sa personalizam o tema WordPress in 2 pasi si 20 de minute

O metoda simpla, la indemana si foarte directa pentru a obtine teme WordPress personalizate este aceea de a recurge la Theme Customizer, disponibil inca de la WordPress 3.4. Echipa Automattic ii indeamna pe programatori sa opteze pentru aceasta varianta, atunci cand incep sa dezvolte o tema pornind de la a lor starter theme Underscores.

Totul se rezuma la doi pasi:

  1. In panoul Customizer:
    Adaugati options ale caror valori le veti salva in baza de date, iar apoi
  2. In functions.php sau in template-ul potrivit:
    Recuperati valorile salvate in baza de date si utilizati-le dupa necesitati.

Ca sa nu mai lungim vorba, iata cateva fragmente de cod gata pentru a fi utilizate pentru personalizarea oricarei teme WordPress (toate fisierele la care se face referire sunt din Underscores starter theme):

Teme WordPress personalizate Exemplul 1. – Logo si Favicon

Pasul 1. – in fisierul inc/customizer.php

function yourtheme_customize_register( $wp_customize ) {
...
	/* *******************************
	// Adaugati Sectiunea General Settings//
	******************************* */
	$wp_customize->add_section( 'general-settings' , array(
            'title' => __( 'General Settings', 'yourtheme' ),
            'priority' => 30,
            'description' => __( 'Upload your logo and favicon here', 'yourtheme' )
	) );
	// Add Logo Setting
	$wp_customize->add_setting( 'logo' , array( 'default' => '' ));
	$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'logo', array(
            'label' => __( 'Your Logo', 'yourtheme' ),
            'section' => 'general-settings',
            'settings' => 'logo'
	) ) );
	// Add Favicon Setting
	$wp_customize->add_setting( 'favicon' , array( 'default' => '' ));
	$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'favicon', array(
            'label' => __( 'Your Favicon', 'yourtheme' ),
            'section' => 'general-settings',
            'settings' => 'favicon'
	) ) );
...
}

Pasul 2.

a. – in header.php afisati logo-ul, daca a fost incarcata o imagine in prealabil

    <div class="site-branding">
        <?php $logo=get_theme_mod('logo');?>
        <?php if ($logo) { ?>
            <a href="<?php echo home_url(); ?>"><img src="<?php echo $logo; ?>" alt="<?php bloginfo( 'name' ); ?>"/></a>
        <?php } else { ?>
            <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
            <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
        <?php } ?>
    </div><!-- .site-branding -->

b. – in functions/php afisati faviconul-ul, daca a fost incarcata o imagine in prealabil

    function yourtheme_favicon() {
        $favicon=get_theme_mod('favicon');
        if ($favicon){
            echo '<link rel="shortcut icon" href="' . $favicon . '"/>'."\n";
        }
        else{ ?>
            <link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/admin/images/favicon.png" />
            <?php
        }
    }
    add_action('wp_head', 'yourtheme_favicon');

Teme WordPress personalizate Exemplul II. – Social Media

Pasul 1. – in fisierul inc/customizer.php

function yourtheme_customize_register( $wp_customize ) {
	...
	/* ***************************
	// Adaugati sectiunea Social Media //
	*************************** */
	$wp_customize->add_section( 'social-media' , array(
            'title' => __( 'Social Media', 'add_setting' ),
            'priority' => 30,
            'description' => __( 'Introduceti URL-ul conturilor Dvs. in fiecare retea, pentru ca icon-ul sa apara in antet.', 'add_setting' )
	) );
	// Add Twitter Setting
	$wp_customize->add_setting( 'twitter' , array( 'default' => '' ));
	$wp_customize->add_control( new WP_Customize_Control( $wp_customize, 'twitter', array(
            'label' => __( 'Twitter', 'add_setting' ),
            'section' => 'social-media',
            'settings' => 'twitter',
            'type' => 'theme_mod'
	) ) );
	// Add FB Setting
	$wp_customize->add_setting( 'facebook' , array( 'default' => '' ));
	$wp_customize->add_control( new WP_Customize_Control( $wp_customize, 'facebook', array(
            'label' => __( 'Facebook', 'add_setting' ),
            'section' => 'social-media',
            'settings' => 'facebook',
            'type' => 'theme_mod'
	) ) );
        // Repetati pentru toate retelele social necesare
	...
}

Pasul 2. – in template-ul care trebuie (header.php, sidebar.php etc.), recuperati parametri social media salvati anterior si tratati-le dupa cum este necesar:

    <?php 
        $tw= get_theme_mod('twitter');
        echo("Tweety: ".$tw);  // test only

        $fb= get_theme_mod('facebook');
        echo("FB: ".$fb);  // test only
    ?>

Variabilele de parametrare pot fi de mai multe tipuri, si anume:

  • WP_Customize_Control() – o caseta de text simpla, pentru a introduce siruri de caractere alfanumerice neformatate; in acelasi timp, este ci parintele tuturor celorlalte tipuri de controale. (a se vedea exemplul II de mai sus, pentru URL-urile social media).
  • WP_Customize_Color_Control() – un selector de culori.
  • WP_Customize_Upload_Control() – un control pentru incarcarea fisierelor multimedia.
  • WP_Customize_Image_Control() – un control pentru incarcarea de imagini (a se vedea exemplul I de mai sus, pentru logo si favicon).
  • WP_Customize_Background_Image_Control() – un control pentru personalizarea imaginii de fundal.
  • WP_Customize_Header_Image_Control() – un control pentru personalizarea imaginii din antet.

E clar acum?

E mult mai simplu sa obtii teme WordPress personalizate cu ajutorul Theme Customizer decat sa creezi o pagina de optiuni pentru tema, sau sa utilizezi Options Framework sau orice metoda era la moda acum un an.

Referinte:

Lasaţi un comentariu

Planul site-ului

deschideţi