Własny motyw WordPress - Tutorial — CyberTutorials
cybertutorials.pl

Po przeczytaniu tego wpisu staniesz się prawdziwym WordPress developerem - stworzysz własny motyw + poznasz podstawy działania wtyczki ACF!

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’);?>).

Linkowanie 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(‘id-stylu’, get_template_directory_uri() . ‘/moj-plik-ze-stylami.css’, ‘’, 1, ‘all’); wp_enqueue_style(‘id-stylu’);

}

add_action(‘wp_enqueue_scripts’, ‘load_stylesheets’);

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’);

Dodanie Menu Aby dodać wsparcie dla menu w naszym motywie dodajemy 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?

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

  • 0 Users Online
  • 3 Subscribers
  • 2 Posts
  • 0 Comments
  • TV
  • Modlog