Motyw wordpress - jak poszerzyć twenty eleven

Twenty eleven jest defaultowym motywem instalowanym wraz z wordpressem. Można go modyfikować i stosować jako framework. Jest o tyle fajny, że ma wbudowany slider, dla którego można dodawać lub wybierać obrazki.

Modyfikując ten motyw często zachodzi potrzeba podmiany obrazków w sliderze i poszerzenia motywu. Teoretycznie można przesłać na serwer po prostu własne obrazki do odpowiedniego katalogu. Ale w czasie aktualizacji motywu zostaną one nadpisane. Dlatego pracujemy na skórce potomnej.

Jednak ten motyw jest często aktualizowany. Dlatego w celu jego modyfikacji trzeba zrobić motyw potomny.

Aby stworzyć motyw potomny trzeba:

  • utworzyć katalog i nadać mu nazwę tak jak nazwa motywu potomnego
  • skopiować tam pliki, które będą modyfikowane, gdyż WordPress najpierw czyta pliki z motywu potomnego a potem plik rodzica
  • modyfikujemy plik style.css dodając na górze nazwę skórki potomnej i nazwę rodzica jak poniżej
  • można zaimportować style z motywu rodzica, wtedy wystarczy tylko wpisać to co zmieniamy, albo można skopiować cały arkusz stylów
/*
Theme Name: Twentyeleven Child
Description: Child theme for the twentyeleven theme 
Author: Your name here
Template: twentyeleven
*/

@import url("../twentyeleven/style.css");

Jak zmienić domyślne obrazki w sliderze motywu twenty eleven

Najpierw tworzymy obrazki odpowiedniej wielkości, nadajemy im nazwy i umieszczamy je w katalogu headers, w katalogu images. Trzeba też zrobić ich miniaturki, które pojawią sie w panelu bloga w opcjach motywu, aby uzytkonik mógł sobie wybrać obrazek nagłówka.

Następnie modyfikujemy plik functions.php skórki potomnej. Jeśli jeszcze tego pliku nie ma to trzeba go strworzyć, po prostu zapisać pod tą nazwą.

Dodajemy poniższy kod.

Pierwsza część ustawia nową wielkość dla obrazków. Wielkość ta pojawi się w opcjach motywu informując użytkownika o wielkości obrazków, które można uzyć.

Druga część wyrejestrowuje obrazki domyslne, gdyż nie są już potrzebne.

Trzecia część rejestruje nowe obrazki. Trzeba odpowiednio wpisać ich nazwy. Gdy zrobimy to poprawnie to obrazki powinny pojawić się w nagłówku bloga i w panelu opcji motywu do wyboru.

/**
*Changes the height and width of our custom header.
*Add a filter to twentyeleven_header_image_width
*and twentyeleven_header_image_height to change the values.
*Header Image code from http://wordpress.org/support/profile/ov3rfly
*/
function dr_header_image_width($size) { return 1000; }
add_filter(‘twentyeleven_header_image_width’, ‘dr_header_image_width’);
function dr_header_image_height($size) { return 150; }
add_filter(‘twentyeleven_header_image_height’, ‘dr_header_image_height’);

/* Remove the twenty eleven default Headers */
function remove_default_headers() {
unregister_default_headers(
array(
‘wheel’,
‘shore’,
‘trolley’,
‘pine-cone’,
‘chessboard’,
‘lanterns’,
‘willow’,
‘hanoi’
)
);
register_default_headers( array(
‘header1’ => array(
‘url’ => get_stylesheet_directory_uri() . ‘/images/headers/header1.jpg’,
‘thumbnail_url’ => get_stylesheet_directory_uri() . ‘/images/headers/header1-thumbnail.jpg’,
/* translators: header image description */
‘description’ => __( ‘header1’, ‘twentyeleven-child’ )
),
‘header2’ => array(
‘url’ => get_stylesheet_directory_uri() . ‘/images/headers/header2.jpg’,
‘thumbnail_url’ => get_stylesheet_directory_uri() . ‘/images/headers/header2-thumbnail.jpg’,
/* translators: header image description */
‘description’ => __( ‘header2’, ‘twentyeleven-child’ )
),
‘header3’ => array(
‘url’ => get_stylesheet_directory_uri() . ‘/images/headers/header3.jpg’,
‘thumbnail_url’ => get_stylesheet_directory_uri() . ‘/images/headers/header3-thumbnail.jpg’,
/* translators: header image description */
‘description’ => __( ‘header3’, ‘twentyeleven-child’ )
),
‘header4’ => array(
‘url’ => get_stylesheet_directory_uri() . ‘/images/headers/header4.jpg’,
‘thumbnail_url’ => get_stylesheet_directory_uri() . ‘/images/headers/header4-thumbnail.jpg’,
/* translators: header image description */
‘description’ => __( ‘header4’, ‘twentyeleven-child’ )
),
‘header5’ => array(
‘url’ => get_stylesheet_directory_uri() . ‘/images/headers/header5.jpg’,
‘thumbnail_url’ => get_stylesheet_directory_uri() . ‘/images/headers/header5-thumbnail.jpg’,
/* translators: header image description */
‘description’ => __( ‘header5’, ‘twentyeleven-child’ )
)
) );
}

add_action( ‘after_setup_theme’, ‘remove_default_headers’, 11 );

Poszerzenie motywu twenty eleven

Motyw ten jest ustawiony procentowo czyli jego wielkość sie dopasowuje do okna przeglądarki. Jeśli chcemy, żeby motyw miał szerokość 1140px to musimy dodać do stylów maksymalną wielkość:

/* =Make our page layout wider
————————————————————– */
#page {
max-width: 1140px;
}
.featured-posts,
#ie7 article.intro {
max-width: 1140px;
}

Dodajemy następujący fragment kodu do pliku functions.php skórki potomnej aby zwiększyć wielkość elementu content:

// It’s a wide layout so make the content wider by 140px
if ( ! isset( $content_width ) )
$content_width = 724;

5 Comments
  1. Chyba jednak zdecydowanie lepszym sposobem jest po prostu zmiana na gotowy szablon – mniej pracy, a efekt zazwyczaj lepszy 🙂

    1. Jeśli kogoś nie interesuje tworzenie szablonów samemu to pewnie, że tak. Spektakularne szablony są najczęściej płatne.

    1. Trzeba zmienić całą szerokość strony. Na obrazku nie da się zbadać co konkretnie trzeba zmienić. Kliknij prawym przyciskiem myszy w fire fox i wybierz Zbadaj element. Po prawej stronie pojawi sie lista stylów. Można zobaczyć, który styl jest odpowiedzialny za szerokość strony. Generalnie zmienia się to w pliku style.css. Ale nie wystarczy zmienić jeden styl. Za szerokość odpowiedzialne jest pare elementów. Trzeba poszerzyć post, do tego poszerzyć całą stronę żeby szerszy post się zmieścił. Tak samo wszystkie inne elementy, tak żeby pasowały.

  2. Witam. Działam na Twenty Eleven w wordpresie. Również chciałbym zmienić pole treści stron na większe. Ze stroną główną udało mi się ale nie wiem jak z resztą stron.

Leave a reply

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

This site uses Akismet to reduce spam. Learn how your comment data is processed.