Stöd för Bilder i WordPress Teman

Artikeln finns som PDF bok på medlemsidorna

När man ska lägga till stöd för bilder i WordPress teman bör man göra det dynamiskt.

Utvalda Bilden

Med the_post_thumbnail kan man lägga till stöd för ”Utvald Bild” (tidigare kallad Inläggets miniatyrbild  och som anges i inläggets redigeringsskärm) för det aktuella inlägget, och funktionen måste skrivas in i  inläggs-loopen.

För att aktivera inläggets utvalda bild, måste det aktuella temat inkluderar stöd för det i functions.php:

add_theme_support('post-thumbnails');

Och i mallfilen skriver man ut bilden med the_post_thumbnail:

<?php the_post_thumbnail( $size, $attr ); ?>

Funktionen  the_post_thumbnail() kan ha ett antal olika parametrar som anger upplösning:

the_post_thumbnail(); // Utan parametrar
the_post_thumbnail('thumbnail'); // Miniatyr (default 150px x 150px max)
the_post_thumbnail( 'medium' ); // Medium (default 300px x 300px max)
the_post_thumbnail( 'large' ); // Stor (default 640px x 640px max)
the_post_thumbnail( 'full' ); // Full (original size uploaded)
the_post_thumbnail(array(100, 100)); // En array med angivna mått

WordPress skapar ett antal standardklasser för utvalda bilder:

<img class="wp-post-image" />
<img class="attachment-thumbnail"/>
<img class="attachment-medium"/>
<img class="attachment-large"/>
<img class="attachment-full"/>

Du kan också ge Inläggets utvalda bild en egen klass som en parameter, och i exemplet nedan lägger vi till klassen ”align-right” till inläggets utvalda bild:

<?php the_post_thumbnail('thumbnail', array( 'class' => 'align-right')); ?>

The_post_thumbnail() måste användas inom loopen. Du kan använda get_the_post_thumbnail($id, $size, $attr) i stället för att få den utvalda bilden för ett specifikt inlägg. Använd has_post_thumbnail() för att kontrollera om en utvalda bild har valts för inlägget.

<?php if (has_post_thumbnail()) : ?>
  <!-- permalänk till inlägget -->
  <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
  <!-- skriv ut bilden -->
    <?php the_post_thumbnail(); ?>
  </a>
<?php endif; ?>

 

Bakgrundsbild

Det är rätt så lätt att lägga till support för en bakgrundsbild:

$defaults = array(
  'default-color'          => '#EEEEEE',
  'default-image'          => get_template_directory_uri() . '/images/default_bakgrund.jpg',
  'wp-head-callback'       => '_custom_background_cb',
  'admin-head-callback'    => '',
  'admin-preview-callback' => ''
);

add_theme_support( 'custom-background', $defaults );

Nu kan du ladda upp en bakgrundsbild genom » Admin panelen » Utseende » Bakgrundsbild, och sedan välja om den ska repetera, vara fixerad, scrolla, vänsterjusterad, högerjusterad eller centrerad, plus standard bakgrundsfärg.

 

Header bild

För att lägga till stöd för header bild kommer vi att få skriva lite mer kod:

/* define roten för temat i en global variabel */
define("THEME_DIR", get_template_directory_uri());

/* Be WordPress  köra the_basic_theme_setup() när 'after_setup_theme' hooken körs. */

add_action('after_setup_theme', 'the_basic_theme_setup');

if (!function_exists('the_basic_theme_setup')):
/* add_custom_image_header() Används för att lägga till stöd för en anpassad header-bild.
register_default_headers() Används för att registrera standard header bilder som ska följa med temat. */

    function the_basic_theme_setup() {
        // Global variabel för textfärg
        define('HEADER_TEXTCOLOR', '');

        // define en standard bild

        define('HEADER_IMAGE', THEME_DIR . '/images/headers/header-image.jpg');

        /* Höjden och bredden på den anpassade sidhuvud. Du kan koppla in i temat egna filter för att ändra dessa värden. Lägg ett filter för att the_basic_theme_header_image_width och the_basic_theme_header_image_height att ändra dessa värden. */

        define('HEADER_IMAGE_WIDTH', apply_filters('the_basic_theme_header_image_width', 940));
        define('HEADER_IMAGE_HEIGHT', apply_filters('the_basic_theme_header_image_height', 198));

        // Vi kommer att använda inlägg miniatyrbilder för egna header bilder på inlägg och sidor. Vi vill att de ska vara 940 pixlar bred och 198 pixlar hög (större bilder kommer att automatiskt beskäras för att passa).

        set_post_thumbnail_size(HEADER_IMAGE_WIDTH, HEADER_IMAGE_HEIGHT, true);

        // Don't support text inside the header image.
        define('NO_HEADER_TEXT', true);

        // Lägg ett sätt för den anpassade sidhuvudet stylas i admin panel som styr anpassade sidhuvuden. Se the_basic_theme_admin_header_style(), nedan.

        add_custom_image_header('', 'the_basic_theme_admin_header_style');

        // … och där avslutas utbytbara header bilderna.
        // Standard sidhuvud bilder förpackade med temat.

        register_default_headers(array(
            'bluecrush' => array(
                'url' => THEME_DIR . '/images/headers/bluecrush.jpg',
                'thumbnail_url' => THEME_DIR . '/images/headers/bluecrush.jpg',
                'description' => __('Bluecrush - Abstract', 'the_basic_theme')
            ),
            'byrce-canyon' => array(
                'url' => THEME_DIR . '/images/headers/byrce-canyon.jpg',
                'thumbnail_url' => THEME_DIR . '/images/headers/byrce-canyon.jpg',
                'description' => __('Byrce Canyon', 'the_basic_theme')
            ),
            'castle' => array(
                'url' => THEME_DIR . '/images/headers/castle.jpg',
                'thumbnail_url' => THEME_DIR . '/images/headers/castle.jpg',
                'description' => __('Castle', 'the_basic_theme')
            )
        ));
    }

endif;

if (!function_exists('the_basic_theme_admin_header_style')) :
/* Lägger till stil för header bilden som visas i admin panelen Utseende » Header.
Refereras via add_custom_image_header() i the_basic_theme_setup(). */

    function the_basic_theme_admin_header_style() {
        ?>
        <style type="text/css">
            #headimg {
                height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
                width: <?php echo HEADER_IMAGE_WIDTH; ?>px;
            }
            #headimg h1, #headimg #desc {
                display: none;
            }
        </style>
        <?php
    }

endif;

Och så för att lägga in den i mallfilen:

<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />

 

Hoppas att du lärde dig något, och till nästa gång, koda smart 😉 !

Stöd för Bilder i WordPress Teman

Lämna ett svar

E-postadressen publiceras inte. Obligatoriska fält är märkta *

Gå till toppen