Własny motyw WordPress – Tutorial

Filip | 19 grudnia 2020

Po przeczytaniu tego artykułu staniesz się pełnoprawnym developerem systemu WordPress – stworzysz własny motyw WordPress + poznasz podstawy działania bardzo popularnej wśrod WordPress developerów wtyczki Advanced Custom Fields (pole tekstowe, pole textarea, pole WYSIWYG Editor). Dzięki niej można stworzyć coś na kształt własnego, zaawansowanego pagebuildera. Jest ona zdecydowanie potrzebna jeśli chcemy tworzyć skomplikowane layouty w własnych motywach. Przeczytaj Również: Własny motyw WordPress vs Gotowiec – który wybrać?

UWAGA – Aby wynieść jakąkolwiek wiedzę z tego wpisu musisz znać HTML i CSS oraz podstawy PHP. Może (chociaż wcale nie musi) przydać się również podstawowa wiedza o jQuery/Javascript.

 

#0 Ważne Pojęcia w motywie WordPress

textdomain – nazwa folderu z motywem

 

 

#1 Utworzenie Motywu

Tworzymy nowy katalog (najlepiej jeśli będzie nazywał się tak samo jak motyw) w folderze wp-content/themes. W środku tworzymy następujące pliki:

  • index.php (szablon strony wpisów/bloga)
  • style.css (tutaj zdefiniujemy nazwę motywu, nie musi być to jedyny plik ze stylami)
  • header.php (nagłówek + deklaracje typu: doctype, charset)
  • footer.php (szablon stopki)
  • 404.php (szablon strony błędu 404 – nie znaleziono)
  • archive.php (strona kategorii)
  • functions.php (funkcje motywu)
  • page.php (szablon strony)
  • single.php (szablon pojedynczego wpisu)
  • front-page.php (szablon dedykowany stronie głównej, nie jest wymagany. Jeśli go nie utworzymy strona główna użyje pliku page.php)

#2 Wypełnianie podstawowych plików treścią

Nazwę, autora, wersję, adres internetowy strony motywu itp. umieszczamy w komentarzach na początku pliku style.css:

/* 
 Theme Name: Mój Nowy Motyw
 Theme URI: https://cybertutorials.pl
 Author: CyberTutorials.pl
 Author URI: https://cybertutorials.pl
 Description: Opis Motywu
 Version: 1.0 
 */

Przykładowy kod który można umieścić w nagłówku (plik header.php)

<!DOCTYPE HTML>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset');?>">
ustawi się sam w zależności od ustawionego w kokpicie języka strony
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<?php wp_head();?> // wbudowane i wymagane skrypty WordPressa
</head>
<body <?php body_class();?>>
<header> // przykładowy nagłówek
<h1><?php bloginfo('name');?></h1> // wyświetla tytuł strony
</header>

// tagi body i html zamkniemy w pliku footer.php

Przykładowy kod stopki:

<footer>
<p>To jest stopka w moim motywie WordPress.</p>
</footer>

<?php wp_footer();?>

</body>
</html> // zamykamy otwarte w pliku header.php tagi

#3 Pętla wpisów

do plików index.php i archive.php dodajemy następujący kod:



<?php get_header();?> // pokazuje nagłówek
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h2><?php the_title();?></h2> // nagłówek h2 z tytułem wpisu
<a href="<?php the_permalink();?>">
<img src="<?php the_post_thumbnail_url('post_image');?>">
</a>
// pokazuje obrazek wyróżniający
<?php the_excerpt();?> // pokazuje mały kawałek wpisu
<a href="<?php the_permalink();?>">Przeczytaj</a> // link do wpisu
<?php endwhile; else : ?>
<?php endif; ?>
<?php get_footer();?> // pokazuje stopkę






W pliku archive.php tuż pod „<?php get_header();?>” możemy dodać nagłówek z nazwą kategorii – ułatwi to nawigację po stronie:


<h1><?php single_cat_title();?></h1>





 


Aby wyświetlić treść pojedynczego wpisu i strony należy dodać do plików page.php i single.php następujący kod:


 


<?php get_header();?>

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

<h1><?php the_title();?></h1>

<img src="<?php the_post_thumbnail_url('post_image');?>">

<?php the_content();?>

<?php endwhile; else: endif;?>

<?php get_footer();?>





#4 Advanced Custom Fields


Przy pomocy domyślnego WordPressowego edytora/Gutenberga niestety nie możemy tworzyć zaawansowanych layoutów (np. kolumn, sekcji). Nie oznacza to jednak że taka możliwość nie istnieje. Z pomocą przychodzi wtyczka Advanced Custom Fields (w tym poradniku omówimy sobie tylko najpotrzebniejsze pola – Tekstowe (jednoliniowy tekst), Text Area (edytor tekstowy), WYSIWYG Editor (Klasyczny edytor WordPressa).


Aby utworzyć takie pola, kolejno:


    

  • Instalujemy wtyczkę (wp-admin > wtyczki > dodaj nową > Advanced Custom Fields > Instaluj > Aktywuj)
    • 

  • przechodzimy do zakładki własne pola, tworzymy nową grupę pól:
    • 



własny motyw wordpress - advanced custom fields1


własny motyw wordpress - advanced custom fields2


Możemy nazwać ją np. strona, w zakładce lokacja dostosujemy pod swoje preferencje (jeśli ma być to edytor strony głównej ustawiamy tak jak na obrazku):


wlasny-motyw-wordpress-advanced-custom-fields4


dodajemy trzy pola (text, Textarea / Obszar Tekstowy, WYSIWYG editor):


własny motyw wordpress - advanced custom fields5


Teraz podczas edycji strony pojawi się zaawansowany edytor:


 




 


Aby umieścić takie pole gdziekolwiek w szablonie używamy następującego kodu:


<?php the_field('id_pola');?>


Przykładowo aby móc użyć takich pól z Bootstrapową kolumną możemy użyć takiego kodu:


 


<div class="container">
<div class="row">
<div class="col-sm">
<?php the_field('kolumna_1');?>
</div>
<div class="col-sm">
<?php the_field('kolumna_2');?>
</div>
</div>
</div>





Pole Tekstowe


Pola tekstowego w ACF możemy użyć np. do dodania pojedynczego nagłówka – jest to jedno linijny tekst który opatrzony tagiem nagłówka HTML np. h3 będzie prostym nagłówkiem. Taki nagłówek możemy dodać gdziekolwiek w szablonie za pomocą takiego kodu:


<h3><?php the_field('id_pola_naglowka');?></h3>



Pole Text Area/Obszar Tekstowy


Pola Text Area możemy użyć do edycji średniej długości tekstów (np. treści małej kolumny). Do redagowania dłuższych tekstów powinno używać się pola WYSIWYG Editor. Umieszczamy je w szablonie w identyczny sposób co poprzednie pola (<?php the_field(’id_pola');?>).


Pole WYSIWYG Editor


Pole WYSIWYG Editor to po prostu klasyczny edytor znany z WordPressa. Umieszczamy go w szablonie w identyczny sposób co poprzednie pola (<?php the_field(’id_pola');?>).


 


#5 Dodawanie Skryptów i Stylów CSS


Aby dodawać style CSS i skrypty JS do naszego motywu dodajemy takie „formułki” do pliku functions.php:


dla styli CSS:


<?php 
function load_stylesheets()
{

wp_register_style('default', get_template_directory_uri() . '/style.css', '', 1, 'all');
wp_enqueue_style('default');







}




dla skryptów JS:


function load_js()
{

wp_register_script('id-skryptu',
get_template_directory_uri() 
. '/moj-plik-js.js', ['jquery'], 1, true);
wp_enqueue_script('id-skryptu');
}
add_action('wp_enqueue_scripts', 'load_js');


 


 


#6 Dodanie Menu


Aby dodać wsparcie dla menu wdodajemy taki kod do functions.php:


register_nav_menus( array(
'glowne-menu' => __( 'Glowne Menu', 'textdomain' ),
) );


 


i taki do header.php (nagłówek)


<?php
wp_nav_menu(array(
'theme_location' => 'glowne-menu',
));
?>


 


Zobacz: Jak dodać Bootstrapowe menu hamburger do motywu WordPress?


 


 


#7 Tag Title


Dokumentacja WordPressa nie zaleca dodawania tagu <title> w pliku header.php – najlepiej ustawić go dodając taki kod do pliku functions.php:


<?php 
add_theme_support('title-tag');?>




Automatyczne wyrenderowanie tagu title przez WordPressa da 100% wsparcie dla wtyczek ułatwiających pozycjonowanie np. Yoast SEO.


#8 Widget/Sidebar


W naszym motywie możemy też dodać sidebar, do którego będziemy mogli dodawać widgety. Każdy sidebar trzeba najpierw zarejestrować – jak można się już oczywiście domyślić w pliku functions.php:


<?php register_sidebar(


array(

'name' => 'Sidebar',
'id' => 'sidebar',
'class' => '',
'before_title' => '<h4>',
'after_title' => '</h4>',

)

);




Teraz tworzymy plik sidebar.php i dodajemy do niego kod:


<?php dynamic_sidebar('id_sidebara');?>


 


Możemy go wywołać w dowolnym miejscu w motywie używając instrukcji:


<?php get_sidebar();?>





#9 Komentarze


W WordPressie istnieje już predefiniowany formularz komentowania wpisów, można wywołać go np. pod treścią wpisu w pliku single.php:


<?php comment_form(); ?>


Jednak można stworzyć własny, w pełni dostosowywalny formularz komentowania. Przykład z mojej strony:


<form action="<?php bloginfo('url'); ?>/wp-comments-post.php" method="post">
<br>
<input type="text" name="author" placeholder="Podpis:" value="" required>
<br>
<input type="text" name="email" placeholder="E-mail:" value="" required>
<br>


<input type="text" name="url" placeholder="Strona:" value="">
<br>
<textarea name="comment" id="comment" rows="7" placeholder="Komentarz:" required></textarea>
<br>
<input type="hidden" name="comment_post_ID" value="<?php echo $post->ID; ?>" />
<br>
<input name="submit" type="submit" class="btn btn-primary" value="Opublikuj">
<br>
</form>



Wyświetlanie Komentarzy


<?php
$thispost = get_the_ID();
$args = array(
'status' => 'approve',
'post_id' => $thispost,
'orderby' => 'comment_date_gmt',
'order' => 'ASC',
);
$comments_query = new WP_Comment_Query;
$comments = $comments_query->query( $args );
if ( $comments ) {
foreach ( $comments as $comment ) {?>
<div class="comment">


<h4><a href="<?php echo comment_author_url(); ?>" rel="nofollow noopener noreferrer external" target="_blank"><?php comment_author(); ?></a></h4>
<div id="gravatar-image">
<?php echo get_avatar( $comment, 50 ); ?>
</div>
<p><?php comment_date(); ?></p>
<p class="comment-content"><?php echo $comment->comment_content; ?></p>
</div>
<?php
}
} else {
echo 'Brak komentarzy.';

}
?>


#10 Wsparcie dla WooCommerce


Wsparcie dla bardzo popularnej wtyczki sprzedażowej WooCommerce możemy zadeklarować dodając do pliku functions.php taki kod:


<?php
add_theme_support('woocommerce');?>





Oczywiście jest to tylko deklaracja wsparcia – aby sklep internetowy współpracował z naszym motywem niezbędne będzie dodanie styli CSS, tak aby wygląd nam odpowiadał.