Własny motyw WordPress – Tutorial

19 grudnia 2020
Autor Poradnika Filip



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:

#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:

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ł.

 





Dodaj Komentarz










Brak komentarzy.