Motyw WordPress składa się z wielu plików napisanych w formatach takich jak PHP, HTML, CSS czy JS. Jak widać jest ich całkiem sporo, chociaż tak na prawdę nie wszystkie zawsze nam będą potrzebne.

Pliki, z których zbudowany jest motyw WordPress

Podstawowe pliki motywu WordPress

W celu uruchomienia skórki WordPress’a tak naprawdę wymagane są 2 pliki:

• style.css – najważniejszy plik w całym szablonie. Bez niego motyw będzie bezużyteczny. Plik oprócz podstawowych styli CSS zawiera również informacje takie jak nazwa motywu, kto jest autorem czy chociaż by rodzaj licencji.
• index.php – podstawowy szablon odpowiadający za wygląd strony. W większości napisany jest w HTML z elementami PHP (w miejscu wyświetlanych treści).

Większość motywów WordPress zawiera również inne pliki takie jak:

• header.php – plik zawierający treść nagłówka takie jak zawartość między znacznikami. Umieszcza się w nim również menu nawigacyjne.
• footer.php – plik jak sama nazwa mówi odpowiedzialny jest za wyświetlanie stopki szablonu.
• functions.php – jest to plik konfiguracyjny – określa się w nim funkcje jakie maja być użyte w skórce. Jako jedyny jest praktycznie w całości napisany w PHP.
• page.php – szablon odpowiedzialny za wyświetlenie treści strony.
• single.php – szablon odpowiedzialny za wyświetlenie treści wpisu.
• comments.php – szablon komętarzy.
• sidebar.php – szablon panelu bocznego.
• category.php – szablon strony określonej kategorii.
• search.php – strona wyników wyszukiwania.
• 404.php – strona błędu, powinien zadziałać gdy konkretna podstrona w witrynie nie istnieje.

Plików tych nie trzeba deklarować. WordPress sam z nich korzysta bez ingerencji autora motywu czy nas samych.

Inne domyślne pliki PHP

To oczywiście nie wszystkie pliki, motyw może zawierać inne pliki takie jak:

• archive.php – szablon archiwum wpisów.
• attachment.php – witryna służąca do wyświetlania złączników oraz zdjęć (chociaż bezpośrednio do tych ostatnich przeznaczony jest plik image.php).
• home.php – szablon strony domowej.
• tag.php – szablon strony jednego z wcześniej utworzonych tagów.
• author.php – szablon strony określonego autora.
• rtl.php – szablon strony działający w przypadku gdy strona jest w języku czytanym od prawej do lewej (można ją dodać za pomocą wtyczki RTLer).

Wydaje mi się, że to wszystkie domyślne pliki PHP obecne w motywie. W nowszych motywach pliki te mogą być też podzielone na kolejne mniejsze pliki. Jednak te będą wywoływane z pliku functions.php lub bezpośrednio w pliku, którego zawartość mają uzupełniać. Przykładowo motyw może mieć 2 lub 3 wersje nagłówka – każda w osobnym pliku ładowanym w header.php.

Pozostałe elementy szablonu

Oprócz powyżej wymienionych plików szablon zawiera także pliki JS (przeważnie umieszcza się je w katalogu js) – nazwy i rodzaj plików zależą od rodzaju zastosowanej biblioteki.

Analogicznie sprawa wygląda z innymi pikami CSS. W podstawowych plikach był co prawda plik CSS, ale jeden plik często to za mało. Przykładowo możemy dodać do naszego motywu bibliotekę Bootstrap.

W razie potrzeby możemy również tworzyć własne szablony wyglądu strony czy dodawać kolejne panele boczne.

Warto tu również wspomnieć że część szablonów posada pliki językowe dzięki nim szablon można bardzo łatwo przetłumaczyć.

Uproszczona struktura szablonu

Poniżej przedstawiam uproszczoną strukturę hierarchii plików szablonu

• katalog-szablonu
  • /js
    • pliki JS
  • /css
    • pliki CSS
  • index.php
  • style.css
  • header.php
  • category.php
  • sidebar.php
  • coments.php
  • single.php
  • page.php

Artykuł Pliki motywu WordPress pochodzi z serwisu Kurs WordPress od podstaw.

Dlaczego zwykła paginacja jest problematyczna

Rozwiązanie to jest bardzo proste ma jednak bardzo dużo wad:

• użytkownik witryny nie wie ile jest podstron,
• przejście do starszych artykułów (umieszczonych na dalszych kartach) jest utrudnione,
• nie można wejść od tak na dowolną podstronę.

Rozwiązaniem tego problemu jest zastąpienie tego typu paginacji (stronicowania) numerowaniem stron co ułatwi poruszanie się po stronie. Rozwiązanie tego typu można samodzielnie zaimplementować w szablonie WordPress, przy niewielkim wysiłku.

Wykonanie paginacji (numerowania stron)

Na oficjalnej stronie WordPress można znaleźć rozwiązanie problemu w języku angielskim.

Nie jest to jedyna metoda jakiej można w tym wypadku użyć. Standardową funkcję paginate_links() można przedstawić nieco inaczej. Z pomocą samej funkcji paginate_links() możemy jedynie uzyskać listę stron. Dlatego by spełniał nasze wymagania trzeba go zmodyfikować.

Przykład:

function pagination() {
    
    global $wp_query;
    
    if ($wp_query->max_num_pages > 1) { echo '<p class="pages" role="navigation">' . paginate_links( array(
        'base' => @add_query_arg('paged','%#%'),
        'format' => '?paged=%#%',
        'current' => max( 1, get_query_var('paged') ),
        'total' => $wp_query->max_num_pages,
        'prev_text' => __('« '),
        'next_text'    => __(' »'),
    ) ) . '</p>'; }
}

Powyższy kod należy dodać do pliku function.php szablonu, w którym chcemy wprowadzić modyfikację.

Teraz musimy jedynie wywołać kod naszej funkcji po jej nazwie:

<?php pagination(); /*wyświetlamy paginację*/ ?>

Umieszczamy go oczywiście w miejscu gdzie ma znajdować się paginacja naszej witryny.

Paginacja obecnie będzie wyglądała np. tak:

« 1 2 3 4 »

Zmiana wyglądu

Jeżeli nie chcemy mieć tak prostej numeracji stron możemy zmodyfikować ją z pomocą CSS np.:

W celu uzyskania takiego efektu umieściłam paginację strony w elemencie blokwym DIV z odpowiednią klasą.

<div class="numerstrony"><?php pagination(); /*wyświetlamy paginację*/ ?></div>

Następnie przygotowałam skrypt CSS:

.numerstrony {
    text-align: center;
}

.numerstrony .page-numbers {
    border: 1px solid #ccc;
    padding: 5px;
}
.numerstrony a.page-numbers{
    outline: none;
    color: #FF9700;
}

.numerstrony .page-numbers.dots, 
.numerstrony .page-numbers.next, 
.numerstrony .page-numbers.prev {
    border: none;
}

Jak widać zamiana ta jest bardzo prosta i nie wymaga dużej specjalistycznej wiedzy.

Źródło:http://strefakodera.pl/poradniki/wordpress/paginacja-numeryczna-w-wordpressie

Artykuł Tworzenie Paginacji w WordPress pochodzi z serwisu Kurs WordPress od podstaw.

Będą to wie kolejno szablony:

• page.php
• category.php
• single.php
• 404.php

Plik page.php jest podobnie jak single.php stosunkowo prosty

<?php get_header(); ?>

<div class="container">
  <?php while ( have_posts() ) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  <h1 class="entry-title"><?php the_title(); ?></h1>   
   <div class="entry-content wp-caption">
    <?php the_content(); ?>
    <?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'shape' ), 'after' => '</div>' ) ); ?>
    <?php edit_post_link( __( 'Edit', 'shape' ), '<span class="edit-link">', '</span>' ); ?>
  </div><!-- .entry-content -->
  <div class="clear"></div>
</article>
<?php endwhile;  ?>

</div>
<?php get_footer(); ?>

Dla uproszczenia pominęłam jeszcze opcję komentowania postów (single.php).

<?php get_header(); ?>
<?php while ( have_posts() ) : the_post() ?>

<div class="container">
  <div class="entry-content">

   <h1 class="entry-title"><?php the_title(); ?></h1>

  <div class="imgpost four columns"><?php the_post_thumbnail(); ?></div>
    <?php the_content( __( 'Continue reading <span class="meta-nav">&amp;raquo;</span>', 'your-theme' ) ); ?>
     <div class="eight columns">
       <?php wp_link_pages('before=<div class="page-link">' . __( 'Pages:', 'your-theme' ) . '&amp;after=</div>') ?>
     </div>
   </div><!-- .entry-content -->
 </div>
<?php endwhile; ?>
<?php get_footer(); ?>

Jak widać oba szablony mają podobną budowę. Trzeba przy tym pamiętać że w bardziej rozbudowanych motywach może być więcej jak jeden szablon strony. O tym jak go utworzyć pisałam wcześniej w innym poście.

Na pewno inną budowę posiada szablon kategorii czyli category.php

<?php get_header(); ?>
<div class="container">
<h1 class="entry-title"><?php _e( '', 'sss' ) ?> <?php single_cat_title() ?></h1>

<?php $categorydesc = category_description(); if ( !empty($categorydesc) ) echo apply_filters( '', '<div class="archive-meta">' . $categorydesc . '</div>' ); ?>
<?php if ( $cats_meow = cats_meow(', ') ) : // Returns categories other than the one queried ?>
<?php endif ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="entry-content">
<article id="post-<?php the_ID(); ?>" class="oferty">
<div class="title">
<h3 class="entry-title"> <?php echo get_the_date( 'Y-m-d' ); ?> | <?php the_title(); ?></h3></div>
<div class="four columns"><?php the_post_thumbnail(); ?></div> 
<div class="eight columns">
<?php the_content( __( 'Continue reading <span class="meta-nav">&amp;raquo;</span>', 'your-theme' ) ); ?></div>

<div class="clear"></div>
</article> 
</div>
<?php endwhile; ?>
<!-- post navigation -->
<?php else: ?>
<!-- no posts found -->
<?php endif; ?>
</div>
<?php get_footer(); ?>

Kwestia budowy strony 404.php w dużym stopniu jest umowna i może wyglądać np. tak.

<?php get_header(); ?>

<div class="container">

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h1 class="entry-title"><?php _e( 'Not Found', 'your-theme' ); ?></h1>
<div class="entry-content wp-caption">

<h2><?php _e( 'This is somewhat embarrassing, isn&rsquo;t it?', 'your-theme' ); ?></h2>
<p><?php _e( 'It looks like nothing was found at this location. Maybe try a search?', 'your-theme' ); ?></p>
<?php get_search_form(); ?>

</div><!-- .entry-content -->
<div class="clear"></div>
</article>


</div>
<?php get_footer(); ?>

PRZECZYTAJ

Dodatkowe tagi:
skórka WordPress
nowy szablon, motyw dla strony
kurs budowy wyglądu strony
własna szata graficzna

Artykuł Budujemy własny motyw WordPress cz. 2 pochodzi z serwisu Kurs WordPress od podstaw.

Od razu uprzedzam, że nie będą to bardzo rozbudowane motywy. Jednak ich budowa może przysporzyć trochę problemów. Podczas kolejnych omawianych tematów postaram się jednak dodać do szablonów, motywu dodatkowe opcje.

Jakie pliki, szablony wchodzą w skład motywu?

Na początek warto zacząć od struktury motywu. Podstawowy motyw zawiera więc pliki takie jak:

• index.php
• header.php
• footer.php
• functions.php
• 404.php
• category.php
• page.php
• single.php
• style.css

W skład niego mogą też wchodzić inne pliki jak np. search.php.

Tutorial został podzielony na kilka części:
Część 1 znajdziecie poniżej
Część 2 w kolejnym wpisie

Jeśli masz problem z kodem możesz już teraz pobrać fragment gotowego motywu.

Pobierz

Nazwy katalogów w większości są dowolne chociaż przeważnie występują następujące:

• css
• img lub images
• js
• include

W WordPress większość opcji jest przedefiniowana, co oznacza że zadaniem twórcy motywu jest jedynie utworzenie odpowiedniego pliku, szablonu. Plik ten musi oczywiście posiadać określoną strukturę z od wołaniami do odpowiednich funkcji.

Obecnie większość nowych szablonów wożona jest tak by mogła być responsywna dlatego postanowiłam tworząc ten tutorial mieć to na uwadze. Nie użyje jednak Bootstrap gdyż wymaga on wielu modyfikacji użyje za to bardzo prostego skeleton. Nie posiada on wielu opcji, ale dla małego projektu się sprawdzi. Dodatkowo nie trzeba będzie go mocno modyfikować by uzyskać pożądany efekt.

Tak więc zaczynamy.

Co nam będzie potrzebne

Pobieramy pliki biblioteki CSS skeleton można je pobrać ze strony http://getskeleton.com/

Dodatkowo można pobrać również pliki:

• https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js
• http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
• http://getskeleton.com/js/site.js
• http://getskeleton.com/css/github-prettify-theme.css
• http://getskeleton.com/css/custom.css

Pliki .CSS umieszczamy w katalogu css a .JS w js – zachowujemy układ jaki ma biblioteka skeleton

Ułatwi to pracę jeżeli nie jesteśmy zaawansowanymi programistami i samodzielnie nie potrafimy tworzyć responsywnych stron (RWD) obecnie to standard. Alternatywnie można pobrać inną bibliotekę dającą RWD jak Bootstrap.

Paczka Skeletona zwiera 2 katalogi CSS i images z plikami oraz plik index.html.

Jeżeli nie posiadamy edytora kodu trzeba go ściągnąć (Notatnik się do tego nie nadaje ze względu na kodowanie strony). Ja wykorzystuje do tych celów najczęściej Notepad++, jest to darmowy program przypominający Notatnik więc obsługa nie powinna sprawić nikomu problemu.

Trzeba również mieć postawionego WordPressa np. na localhost (ja używam serwera XAMPP) lub na serwerze w internecie.

Kiedy już posiadamy to wszystko możemy przystąpić do pracy. Zaczynamy od utworzenia folderu, w którym zbudujemy nasz template a w nim na początek dodajemy:

• index.php
• header.php
• footer.php
• functions.php
• style.css

header.php – nagłówek

Zaczniemy może od zawartości pliku header.php. Będzie to nagłówek w naszym motywie a jego szablon przedstawia się następująco:

<!DOCTYPE html>
<!--[if IE 7]>
  <html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
  <html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) & !(IE 8)]><!-->
  <html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
   <meta charset="<?php bloginfo( 'charset' ); ?>">
   <meta name="viewport" content="width=device-width">
     <title><?php wp_title( '|', true, 'right' ); ?></title>
   <link rel="profile" href="http://gmpg.org/xfn/11">
   <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php wp_head(); ?>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script> 
   $(document).ready(function(){
     $("#flip").click(function(){
       $("#panel").slideToggle("slow");
     });
   });
  </script>
</head>
<body <?php body_class(); ?>>
<header id="top" role="banner" class="container">

  <div class="row">
   <div class="three columns"><a href="/"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/logo.png" alt="Twoje logo" style="width:120px;"/></a> 
    <div id="flip">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
	</div>
   </div>
   <div class="nine columns"></div>
   <div class="twelve columns">
   <hgroup>
				<h3 id="site-title">
				<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
				<?php bloginfo( 'name' ); ?></a> </h3>
				<p><?php bloginfo( 'description' ); ?></p>
    </hgroup>
    <nav class="nav-collapse navbar" id="panel">
      <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'navbar-list', 'menu_id' => 'primary-menu' ) ); ?>
    </nav>
   </div>
  </div>
</header>

Jeśli dobrze się przyjrzeć to w kodzie tym znajduje się deklaracja podstawowych funkcji niezbędnych w szablonie.

<?php wp_head(); ?>

W miejscy powyższego kodu zostaną umieszczone odnośniki do wszystkich styli CSS oraz skryptów wykorzystanych później.

<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) & !(IE 8)]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->

Z kolei ten kod dobiera odpowiednio informację o języku naszego szablonu. Jak widać nie jest to sztywne ustawienie.

Teraz by szablon był bardziej funkcyjny dodamy do niego menu.

<nav class="nav-collapse" id="panel">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'navbar-list', 'menu_id' => 'primary-menu' ) ); ?>
</nav>

oraz

<div id="flip"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button></div></div>

W całości kod z zastosowaniem formatowania będzie prezentował się tak:

<div class="container">
  <div class="row">
   <div class="three columns"><a href="/"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/logo.png" alt="SSS" style="width:120px;"/></a> 
    <div id="flip">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button></div></div>
   <div class="nine columns">
    <nav class="nav-collapse" id="panel">
      <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'navbar-list', 'menu_id' => 'primary-menu' ) ); ?>
    </nav>
   </div>
  </div>
</div>

Za pomocą zmiennej umieszczonej poniżej można uzyskać adres do aktualnie wykorzystywanego szablonu. Jest to bardzo przydatne gdyż nie musimy podawać całego adresu do np. obrazków umieszczonych w szablonie.

<?php echo esc_url( get_template_directory_uri() ); ?>

Więcej o odnośnikach do strony głównej.

index.php

Teraz pora na index.php

<?php get_header(); ?>

<div class="container">
  <div class="row">
     <?php while ( have_posts() ) : the_post() ?>
   <div class="entry-content">
      <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <h1 class="entry-title"><?php the_title(); ?></h1>
        <?php the_content( __( 'Continue reading <span class="meta-nav">&amp;raquo;</span>', 'your-theme' ) ); ?>
        <?php wp_link_pages('before=<div class="page-link">' . __( 'Pages:', 'your-theme' ) . '&amp;after=</div>') ?>
      </div><!-- .entry-content -->
    </article>
    <?php endwhile; ?>
  </div> 
</div>

<?php get_footer(); ?>

Powyższy kod wypisze stronę główną jeżeli ta będzie statyczną stroną, będziemy mieć jednak problemy z stroną blogową.

<?php get_header(); ?>

<div class="container">
  <div class="row">
    <?php if ( is_home() ){ ?>
      <h1 class="entry-title">Blog</h1>
   <?php } ?>

<?php while ( have_posts() ) : the_post() ?>
    <div class="entry-content">
      <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
     <?php if ( is_home() ){ ?>

<div class="imgpost four columns"><?php the_post_thumbnail(); ?></div>
<div class="content nine columns">
<div class="title"><h3 class="entry-title"> <?php echo get_the_date( 'Y-m-d' ); ?> | <?php the_title(); ?></h3></div>
<?php the_content( __( 'Continue reading <span class="meta-nav">&amp;raquo;</span>', 'your-theme' ) ); ?></div>

<?php } else{ ?>

<h1 class="entry-title"><?php the_title(); ?></h1>
<?php the_content( __( 'Continue reading <span class="meta-nav">&amp;raquo;</span>', 'your-theme' ) ); ?>
<?php } ?>
<div class="clear"></div>

<?php wp_link_pages('before=<div class="page-link">' . __( 'Pages:', 'your-theme' ) . '&amp;after=</div>') ?>
</div><!-- .entry-content -->


<div class="clear"></div>
</article>
<?php endwhile; ?>
</div>
</div>

<?php get_footer(); ?>

Trochę objaśnień:

Powyższy kod spina w pewnym sensie całą stronę poprzez dodanie odwołań do pozostałych elementów:
Dodanie header.php

<?php get_header(); ?>

Dodanie footer.php

<?php get_footer(); ?>

footer.php

Kolejnym elementem jest footer.php

<footer>
<div class="container">
<div class="clear"></div>

<p>Copyright &copy; </p>
</div>
</footer>
<?php wp_footer(); ?>
</body>
</html>

functions.php

Kiedy mamy już te elementy pora na to by szablon stał się zdatny do użytku. W tym celu tworzymy plik functions.php na razie umieścimy w nim tylko kilka elementów.

<?php
add_action( 'wp_enqueue_scripts', 'enqueue_and_register_my_scripts' );
function enqueue_and_register_my_scripts()
{
//register scripts for our theme
wp_register_script('jquery-min', get_stylesheet_directory_uri() . '/js/jquery.min.js');
wp_register_script('run_prettify', get_stylesheet_directory_uri() . '/js/run_prettify.js' );
wp_enqueue_script( 'site', get_stylesheet_directory_uri() . '/js/site.js' );

}

function shape_scripts() {
wp_enqueue_style( 'style', get_stylesheet_uri() );

}
add_action( 'wp_enqueue_scripts', 'shape_scripts' );

add_action( 'after_setup_theme', 'register_my_menu' );
function register_my_menu() {
register_nav_menu( 'primary', __( 'Primary Menu', 'nazwa-szablonu' ) );
register_nav_menu('second-menu', __('Second Menu'));
}
register_nav_menus( array(
'primary' => __( 'Primary Navigation', 'nazwa-szablonu' ),
) );

add_theme_support( 'post-thumbnails');
function remove_more_link_scroll( $link ) {
$link = preg_replace( '|#more-[0-9]+|', '', $link );
return $link;
}
add_filter( 'the_content_more_link', 'remove_more_link_scroll' );
add_filter( 'the_content_more_link', 'modify_read_more_link' );
function modify_read_more_link() {
return '<div class="more"><a class="more-link" href="' . get_permalink() . '">Zobacz</a></div>';
}

function cats_meow($glue) {
$current_cat = single_cat_title( '', false );
$separator = "n";
$cats = explode( $separator, get_the_category_list($separator) );
foreach ( $cats as $i => $str ) {
if ( strstr( $str, ">$current_cat<" ) ) {
unset($cats[$i]);
break;
}
}
if ( empty($cats) )
return false;

return trim(join( $glue, $cats ));
}

?>

Każda z tych funkcji pełni inną rolę.

Po zadeklarowaniu poniższej funkcji trzeba utworzyć katalog o nazwie „js” i umieścić w nim pliki javascript (kończące się na js).

add_action( 'wp_enqueue_scripts', 'enqueue_and_register_my_scripts' );
function enqueue_and_register_my_scripts()
{
//register scripts for our theme
wp_register_script('jquery-min', get_stylesheet_directory_uri() . '/js/jquery.min.js');
wp_register_script('run_prettify', get_stylesheet_directory_uri() . '/js/run_prettify.js' );
wp_enqueue_script( 'site', get_stylesheet_directory_uri() . '/js/site.js' );

}

W WordPress skrypty najlepiej dodawać w ten sposób.

Teraz pora na dodanie skryptów CSS. Dzięki tej funkcji po utworzeniu pliku style.css będzie on się automatycznie wczytywał.

function shape_scripts() {
wp_enqueue_style( 'style', get_stylesheet_uri() );

}
add_action( 'wp_enqueue_scripts', 'shape_scripts' );

Kolejny fragment umożliwia nam dodanie własnego menu co z pewnością ułatwi personalizacje szablonu

add_action( 'after_setup_theme', 'register_my_menu' );
function register_my_menu() {
register_nav_menu( 'primary', __( 'Primary Menu', 'nazwa-szablonu' ) );
register_nav_menu('second-menu', __('Second Menu'));
}
register_nav_menus( array(
'primary' => __( 'Primary Navigation', 'nazwa-szablonu' ),
) );

Teraz pora na dodanie możliwości umaszczenia obrazków do wpisu. Nie jest to obowiązkowe, ale szablon będzie o wiele ciekawszy.

add_theme_support( 'post-thumbnails');

Następnie przychodzi czas na red more czyli czytaj dalej. W tym przykładzie przetłumaczyłam to na Zobacz.

$link = preg_replace( '|#more-[0-9]+|', '', $link );
return $link;
}
add_filter( 'the_content_more_link', 'remove_more_link_scroll' );
add_filter( 'the_content_more_link', 'modify_read_more_link' );
function modify_read_more_link() {
return '<div class="more"><a class="more-link" href="' . get_permalink() . '">Zobacz</a></div>';
}

style.css

W ostatnim kroku utworzymy plik style.css.

/*
Theme Name: WP test
Theme URI: http://www.aurainweb.pl
Description: Przykładowy szablon.
Author: Aura
Author URI: http://www.aurainweb.pl
Version: 1.0
Tags: responsive, white, scelton

License: Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)
License URI: http://creativecommons.org/licenses/by-sa/3.0/

This simple theme was built using the example Sceleton theme "Basic marketing site" found on the Bootstrap
*/

@import url('css/normalize.css');
@import url('css/skeleton.css');
@import url('css/custom.css');

Poniżej tej deklaracji samodzielnie uzupełnia się plik styli. Warto też pamiętać by dodać pozostałe style w katalogu css

Skeleton i dociągnięte do niego style i skrypty powinien część pracy wykonać za nas. Nie posiada on jednak typowych dla WordPress klas oraz nie ma responsywnego menu dlatego do pliku style.css trzeba dopisać

img{
	max-width: 100%;
	height:auto;
} 
a{
 text-decoration: none;
}
header.container{
	margin-bottom:30px;
}
 
#primary-menu{
 list-style: none;
}
 .navbar-list{
	width:100%;
}
.navbar-list{
	width:100%;
}
.navbar-list li{
	display: inline-block;
	position:relative;
}
.navbar-list li a{
	display: block;
    padding: 21px 10px;
	margin: 0;
}
.navbar-list li ul{
	width: 100%;
    padding: 0;
    margin: 0;
}
.navbar-list li ul li{
	display: none;
    padding: 10px;
    position: absolute;
    top: 40px;
    background: #fff;
    z-index: 100;
    margin: 0;
	border-bottom: 1px dashed #000;
}
.navbar-list li:hover ul li{
	display: inline-block;
}
 .navbar-list li:hover ul li a{
	 padding:15px;
 }
@media screen and (min-width: 750px) {

.nav-collapse ul ul{
	z-index:1;
	}
.nav-toggle {
	display:none;
}
#flip{
	display:none;
	}
#panel{ 
	display: block !important;
}

.home .oferty .column, .home .oferty .columns, .category .oferty .columns{
	margin-left: 2%;
	}
.home .column:first-child, .home .columns:first-child{
	margin-left: 0%;
	}
.navbar-list li:last-child a{
	border-right:none;
	}
}
@media screen and (max-width: 750px) {
#panel {
padding: 5px;
text-align: center;
background:#0a0a0a;
}
#flip {
padding: 5px;
text-align: center; width:30px;
float:right;
}
 
#panel {
padding: 0px;
display: none;
position: relative;
width:100%; z-index: 1;
}
#panel .navbar-list{width:100%; display:block; background:#0a0a0a;}
#panel .navbar-list li {border-bottom:1px solid #fff;}
#panel .navbar-list li a{color:#fff;}
 
.navbar-toggle {
 position: relative;
 float: right;
 padding: 9px 10px;
 margin-top: 8px;
 margin-right: 15px;
 margin-bottom: 8px;
 background-color: transparent;
 background-image: none;
 border: 1px solid #ddd;
 border-radius: 4px;
 width: 45px;
}
.sr-only {
 position: absolute;
 width: 1px;
 height: 1px;
 padding: 0;
 margin: -1px;
 overflow: hidden;
 clip: rect(0,0,0,0);
 border: 0;
}
.navbar-toggle .icon-bar {
 background-color: #ddd;
 display: block;
 width: 22px;
 height: 3px;
 border-radius: 1px;
 margin-bottom:3px;
}
}

Warto Pamiętać że:

Theme Name: WP test – to nazwa motywu
Tags: responsive, white, scelton :tagi, hasła do motywu

Masz problem pobierz gotowy fragment szablonu.

Pozostałe części motywu pokaże jak utworzyć w kolejnych częściach.

Budujemy własny motyw WordPress cz. 2

Artykuł Budujemy własny motyw WordPress cz. 1 pochodzi z serwisu Kurs WordPress od podstaw.

O tym jak zbudować własny motyw dowiesz się z wpisu
Budujemy własny motyw

Dlatego też w tym wpisie pokaże jak zmodyfikować istniejący już motyw poprzez dodanie nowego szablonu strony. Jest to dosyć proste i nie wymaga sporej wiedzy.

Metody na zmianę wyglądu podstrony

Można to zrobić na 2 sposoby, poprzez stworzenie nowego pliku z zmodyfikowanym kodem lub wprowadzić modyfikacje do istniejącego pliku.

Pierwsza metoda personalizowania motywu – tworzymy własny szablon strony:

Kopiujemy istniejący plik page.php z aktualnie używanego motywu i nadajemy mu niepowtarzalną nazwę. Następnie w kopi (nowym pliku) wprowadzamy niezbędne zmiany takie jak np. dodanie dodatkowych pól lub inne poprawki jakie chcemy wprowadzić. W efekcie uzyskany szablon strony będzie się różnić od oryginalnego – warto przy tym pamiętać by nie usuwać istotnych elementów struktury tak by nowy typ strony/podstrony wpasował się w aktualny szablon. Trzeba również pamiętać o dopisaniu przed znacznik

get_header();

poniższego kodu gdzie „Produkty” to nazwa nowego szablonu

<?php
/**
* Template Name: Produkty
*/
?>

Gotowy plik wgrywamy na serwer FTP. Od tego momentu w zakładce strony podczas edycji tekstu będziemy mogli wybrać pomiędzy nowym szablonem a starym. Szablonów tego typu w jednym motywie może być kilka.

UWAGA: Mało prawdopodobne by wszystko z plikiem było dobrze za pierwszym razem, mogą pojawiać się błędy. Czasami trzeba nawet kilkakrotnie modyfikować plik nim będzie poprawnie działał.

Personalizacja szablonu strony  <- rozwinięcie poprzedniej:

Modyfikuję istniejącą stronę!

To średnio udany pomysł – o ile nie jesteśmy autorem motywu! Jest tak dlatego, że wszystkie nasze zmiany zostaną usunięte podczas aktualizacji motywu.

Ustawianie warunków w szablonie

W tej metodzie modyfikujemy istniejący szablon czyli wprowadzamy zmiany w pliku page.php lub naszym nowym pliku, który przygotowaliśmy wcześniej (podobne zmiany można wprowadzić w innych plikach).

Przed zaczęciem tej pracy warto poznać kilka zmiennych:

• is_front_page() – odnosi się do strony głównej
• is_page( 'About’ ) – odnosi się do strony noszącej nazwę 'About’,
• is_page(11) – odnosi się do strony posiadającej id 11,
• is_page( array( 42, 'about-me’, 'Contact’ ) ) – odnosi się do stron, które mają ID 42, nazywają się 'about me’ lub 'contact’

Dzięki tym zmiennym oraz kilku innym (np. is_home()) można w PHP napisać warunki dzięki, którym określona treść wyświetli się tylko po spełnieniu określonych warunków np.

if ( is_front_page() ) {
    get_header( 'home' );
} elseif ( is_page( 'About' ) ) {
    get_header( 'about' );
} else {
    get_header();
}

W ten sposób, możemy korzystać z jednego szablonu i uzyskać inny wygląd strony.

W zamieszczonym powyżej przykładzie kodu w zależności czy jest to strona główna, o nazwie About czy inna posiadamy 3 różne nagłówki. I tak:

• get_header( 'home’ ) to plik o nazwie header-home.php

get_header( 'about’ ) to plik o nazwie header-about.php

Dla tych podstron o ile będą używały naszego szablonu standardowy header.php zostanie zastąpiony innym. Na waszej stronie może to oczywiście inaczej wyglądać i dotyczyć np. klasy, która ma zostać dodana w określonym przypadku.

Po modyfikacji zastępujemy plik stary plik nowym.

Jak skorzystać z nowego szablonu?!

W celu użycia nowego szablonu wchodzimy w panelu administracyjnym strony i wybieramy interesujący nas szablon.

Podsumowanie

Obie metody wymagają pewnej wiedzy programistycznej i trzeba je łączyć w celu uzyskania jak najbardziej funkcjonalnego szablonu. Część niezbędnych informacji można samodzielnie wyszukać, ale i tak w większości trzeba wprowadzać zmiany na przemian z testowaniem.

Dodatkowe tagi:
własny wygląd, typ podstrony
jak wykonać skórkę dla strony
Jak uzyskać inny wygląd podstrony w WordPressie

• http://wordpress.aurainweb.pl/statyczna-strona-glowna-wordpress/
• http://wordpress.aurainweb.pl/dodawac-podstrony-wpisami-wordpress/

Artykuł Własny wygląd podstrony, strony w motywie WordPress pochodzi z serwisu Kurs WordPress od podstaw.