WordPress Custom Theme Tutorial

WordPress Custom Theme Tutorial

nauka tworzenia niestandardowych motywów WordPress otwiera zupełnie nowy świat do odkrycia. Pozwala na tworzenie niestandardowych projektów dla siebie, swoich klientów, a nawet przyczynić się do społeczności open-source.

w tym przewodniku zabierzemy cię od zera do posiadania w pełni funkcjonalnego motywu, który można przesłać do WordPress.org Katalog tematyczny.

aby kontynuować, potrzebujesz podstawowej wiedzy na temat HTML, CSS, PHP i sposobu działania WordPress.

cały kod użyty w tym przewodniku będzie dostępny w tym repozytorium Github.

Krok # 1: Tworzenie niezbędnych plików dla niestandardowego motywu

działający motyw WordPress może składać się z zaledwie dwóch plików: stylu.css i indeks.php. Jest to możliwe dzięki hierarchii szablonów WordPress.

gdy WordPress wyświetla stronę internetową, wyszukuje najbardziej konkretny dostępny szablon, jeśli szablon nie istnieje, przesunie się w dół hierarchii, dopóki nie znajdzie takiego, który to zrobi. Oto praktyczny przykład:

użytkownik jest na https://example.com/practical-example, która jest stroną. WordPress spróbuje zlokalizować szablon w tej kolejności:

1. 1. • page – {slug}.php – the page SLUG is / practical-example, WordPress będzie chciał użyć Twojego-theme / page-practical-example.php
      • strona – {id}.php – identyfikator strony to 42, WordPress będzie używał Twojego-theme / page-42.php.
      • strona.php – WordPress spróbuje ogólnego przeznaczenia Twój motyw / strona.szablon php.
      • php-pojedynczy szablon może renderować posty i strony, więc jest próbowany po bardziej konkretnej stronie.PHP
      • index. PHPphp-Last your-theme / index.php jest używane, jeśli nie znaleziono innego szablonu.

zacznijmy od zbudowania motywu z najważniejszymi plikami, a następnie możemy nakładać kolejne funkcje, badając ich działanie.

w /wp-content/themes/ utwórz folder o nazwie my-custom-theme i utwórz te dwa następujące pliki:

style.css

aby WordPress rozpoznał nasz motyw i wyprowadził go poprawnie na liście Wygląd → Motywy, musimy umieścić kod specyficzny dla WordPressa na górze stylu.css, wygląda to tak:

/*Theme Name: My Custom ThemeTheme URI: https://yourwebsite.com/themeAuthor: Your NameAuthor URI: https://yourwebsite.comDescription: This is my first custom theme!Version: 1.0.0License: GNU General Public License v2 or laterLicense URI: <https://www.gnu.org/licenses/gpl-2.0.html>Text Domain: my-custom-themeTags: custom-background*/

technicznie żadne z pól nie jest wymagane, ale jeśli chcesz, aby Twój motyw dobrze wyglądał w wp-admin, są bardzo zachęcani. Są one również wymagane, jeśli rozpowszechniasz swój motyw na WordPress.

1. 1. • Nazwa motywu – zawsze powinieneś podać nazwę motywu. Jeśli tego nie zrobisz, zostanie użyta nazwa folderu, my-custom-theme w naszym przykładzie.
      • identyfikator URI motywu – jeśli jest używany, identyfikator URI motywu powinien zawierać link do strony, na której odwiedzający mogą dowiedzieć się więcej o motywie.
      • Autor – Twoje imię idzie tutaj.
      • Autor URI-tutaj można umieścić link do twojej osobistej lub biznesowej strony internetowej.
      • Opis-opis jest wyświetlany na modalu motywu wp-admin, a także na liście motywów WordPress.
      • Wersja – numery wersji pomagają programistom śledzić zmiany i informują użytkowników, czy używają najnowszej wersji. Stosujemy system numeracji SemVer, aby określić wagę zmian w aktualizacji.
      • Licencja – sposób licencjonowania motywu zależy od ciebie, ale jeśli wybierzesz licencję niezgodną z GPL, nie będziesz mógł rozpowszechniać swojego motywu na WordPress.
      • Uri licencji-jest to po prostu link do licencji wymienionej powyżej.
      • domena tekstowa – domena tekstowa jest używana podczas tłumaczenia motywu na inne języki. Nie martw się, omówimy to dogłębnie później. Na razie wystarczy wiedzieć, że dobrą praktyką jest, aby folder motywowy i domena tekstowa były nazwą motywu oddzieloną myślnikami zamiast spacjami.
      • tagi-tagi są używane tylko wtedy, gdy wgrywasz swój motyw do WordPress.org Katalog tematyczny. Są one podstawą mechanizmu „Feature Filter”.

skopiuj i wklej powyższe do stylu.css i będziesz miał coś takiego:

Uwaga: w tej chwili wygląda to trochę pusto, ponieważ nie mamy jeszcze zrzutu ekranu. Dodamy to później.

indeks.PHP

index. PHPphp jest jedynym innym ściśle wymaganym plikiem. Jego zadaniem jest renderowanie wszystkich wyjść front-end dla naszego motywu.

od indeksu.php będzie renderować wszystkie nasze strony (Dom, posty, kategorie, archiwa) to będzie robić dużo pracy. Na początek potrzebujemy sekcji head, która obejmie podstawy HTML.

<!DOCTYPE html><html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="profile" href="https://gmpg.org/xfn/11"> <?php wp_head(); ?> </head>

jest to standardowy HTML z jednym wyjątkiem, (<https://developer.wordpress.org/reference/hooks/wp_head/>). wp_head to podstawowa funkcja, która umożliwia WordPress i wtyczki innych firm wstawianie kodu do nagłówka bez modyfikowania plików szablonów. Nazywa się to hakiem akcji.

jeśli znasz HTML, możesz zauważyć, że nie ma znacznika < title> do wyświetlania tytułu strony. Dzieje się tak dlatego, że WordPress może używać haka wp_head do dynamicznego wstawiania tytułu.

innym zastosowaniem wp_head jest sprawdzenie stylów (.css) i skryptów (.js). Istnieją bardzo dobre powody, aby robić to zamiast ich kodowania na twardo, co przyjrzymy się później.

następnie mamy treść strony:

<body <?php body_class(); ?>>

body_class() jest funkcją pomocniczą dostarczaną przez WordPress, która wyświetli listę przydatnych klas CSS opisujących wyświetlaną stronę, takich jak:

class="page page-id-2 page-parent page-template-default logged-in"

body_class(); akceptuje również parametr, dzięki czemu można dodawać własne klasy, na przykład:

<body <?php body_class( 'wide-template blue-bg' ); ?>>

następnie mamy nagłówek szablonu.

<header class="site-header"><p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></p><p class="site-description"><?php bloginfo( 'description' ); ?></p></header><! – .site-header – >

tutaj używamy wbudowanych funkcji szablonu WordPress, aby wyświetlić tytuł i opis witryny. Użyliśmy również funkcji pomocniczej, home_url (), aby połączyć Tytuł witryny z powrotem do strony głównej.

Następna strona:

<div class="site-content"><?phpif ( have_posts() ) :while ( have_posts() ) :the_post();?><article <?php post_class(); ?>><header class="entry-header"><?php the_title( '<h1 class="entry-title">', '</h1>' ); ?></header><! – .entry-header – ><div class="entry-content"><?php the_content( esc_html__( 'Continue reading &rarr;', 'my-custom-theme' ) ); ?></div><! – .entry-content – ></article><! – #post-## – ><?php// If comments are open or we have at least one comment, load up the comment template.if ( comments_open() || get_comments_number() ) :comments_template();endif;endwhile;else :?><article class="no-results"><header class="entry-header"><h1 class="page-title"><?php esc_html_e( 'Nothing Found', 'my-custom-theme' ); ?></h1></header><! – .entry-header – ><div class="entry-content"><p><?php esc_html_e( 'It looks like nothing was found at this location.', 'my-custom-theme' ); ?></p></div><! – .entry-content – ></article><! – .no-results – ><?phpendif;?></div><! – .site-content – >

tutaj robi się ciekawie (i trochę bardziej skomplikowanie). Tutaj używamy najważniejszej funkcji WordPressa, pętli. Pętla wykonuje ciężką pracę, ustalając, na której stronie znajduje się użytkownik i co powinno być pokazane. Następnie zwraca listę jednego lub więcej 'postów’, które możemy zapętlić i wyprowadzić dane za pomocą funkcji szablonu.

jeśli pętla nie zwraca żadnych wyników, na przykład na stronie 404 lub usuniętym poście, używamy operatora else, aby wyświetlić wstępnie zdefiniowaną wiadomość.

bez żadnego otaczającego kodu, uproszczona pętla wygląda tak:

if ( have_posts() ) : // check if the loop has returned any posts.while ( have_posts() ) : // loop through each returned post.the_post(); // set up the content so we can use template tags like the_title().the_title(); // output the post title.the_content(); // output the post content.endwhile;else : echo 'No Page Found'; // output an error message if there are no posts.endif;?>

Uwaga: Ponieważ WordPress ma swoje początki w blogowaniu, wiele funkcji używa terminologii „post”, nawet jeśli mogą zwracać i wyprowadzać dowolny rodzaj treści (posty, strony, niestandardowe typy postów).

wreszcie mamy stopkę, wszystko, co musimy zrobić, to zamknąć znaczniki HTML, które otworzyliśmy wcześniej. Istnieje inny hook akcji, wp_footer (), który jest aktywnie używany przez WordPress i wtyczki do włączenia skryptów w stopce potrzebnej do renderowania strony.

<?php wp_footer(); ?></body></html>

jeśli do tej pory śledziłeś, będziesz miał w pełni funkcjonalny motyw WordPress, który wygląda tak:

nasz motyw nie wygra żadnej nagrody za wzornictwo (nie ma CSS) i brakuje mu wielu funkcji, które użytkownicy uważają za istotne (paski boczne, nawigacja, metadane, miniatury, paginacja itp.) ale to świetny początek!

kontynuujmy i zobaczmy, jak możemy to poprawić.

Krok #2: Tworzenie funkcji.funkcje php

.php nie jest ściśle wymaganym plikiem, ale zapewnia tak wiele korzyści, że 99.99% motywów ma go. W funkcjach.php możesz wykorzystać wbudowaną funkcjonalność motywu WordPress, a także dodać własny niestandardowy kod PHP.

tworzenie funkcji.php w folderze motywu teraz, jak będziemy dodawać kod do niego w następnych sekcjach.

dodawanie menu nawigacyjnego

większość, jeśli nie wszystkie strony wykorzystują menu nawigacyjne, ale do tej pory nasz motyw go nie obsługuje. Aby powiedzieć WordPress nasz motyw posiada menu nawigacyjne, musimy zarejestrować go w funkcji.PHP like this:

register_nav_menus( array( 'menu-1' => __( 'Primary Menu', 'my-custom-theme' ),);

Uwaga: register_nav_menus() akceptuje tablicę, więc w razie potrzeby można zarejestrować więcej niż jedno menu.

WordPress teraz wie o naszym menu, ale nadal musimy wyprowadzić je w naszym motywie. Robimy to dodając poniższy kod pod opisem strony w indeksie.php:

wp_nav_menu( array( 'theme_location' => 'menu-1',) );

teraz mamy (niestylowane) menu nawigacyjne:

dodanie paska bocznego

nasz motyw nie ma paska bocznego (obszaru widżetu), naprawmy to teraz.

najpierw musimy zarejestrować pasek boczny w funkcjach.php:

function my_custom_theme_sidebar() { register_sidebar( array( 'name' => __( 'Primary Sidebar', 'my-custom-theme' ), 'id' => 'sidebar-1', ) );}add_action( 'widgets_init', 'my_custom_theme_sidebar' );

teraz Utwórz pasek boczny.php w folderze motywu i dodaj następujący kod:

<?php if ( is_active_sidebar( 'sidebar-1' ) ) { ?> <ul class="sidebar"> <?php dynamic_sidebar('sidebar-1' ); ?> </ul><?php } ?>

tutaj używamy instrukcji if, aby sprawdzić, czy pasek boczny jest 'aktywny’, zanim wypuścimy kod. Aktywny pasek boczny to taki, do którego użytkownik dodał co najmniej jeden widżet.

ostatnim krokiem jest włączenie paska bocznego do indeksu.php, powyżej wp_footer() dodaje wywołanie get_sidebar ().

dodawanie wyróżnionych obrazów

podobnie jak paski boczne i menu nawigacji, nie możemy po prostu wyprowadzić wyróżnionych obrazów w naszym motywie i oczekiwać, że będą działać, musimy powiedzieć WordPress, że obsługujemy tę funkcję w pierwszej kolejności. W funkcjach.PHP dodaj:

add_theme_support( 'post-thumbnails' );

teraz możemy dodać the_post_thumbnail(); w naszej pętli i miniaturki będą działać. Jedynym problemem jest to, że będą one generować maksymalny rozmiar WordPress 1920px x 2560px, co jest zbyt duże dla większości zastosowań. Na szczęście WordPress ma inną funkcję pomocniczą: add_image_size ();

gdy użytkownik przesyła obraz, a jeśli rozmiar obrazu jest zdefiniowany, WordPress wygeneruje wersję przesłanego obrazu w tym rozmiarze (zachowując oryginał). Jeśli obraz użytkownika jest mniejszy niż wymiary ustawione WordPress nic nie zrobi, ponieważ nie może sprawić, że obraz będzie większy niż oryginał.

aby użyć zoptymalizowanego obrazu funkcji zamiast oryginału, umieść następujący kod w funkcji.php:

add_image_size( 'my-custom-image-size', 640, 999 );

pierwszy parametr to uchwyt, drugi to szerokość obrazu, a trzeci to wysokość. Zarówno wysokość, jak i szerokość są opcjonalne, jeśli chcesz ograniczyć tylko jeden wymiar.

w indeksie.php:

the_post_thumbnail( 'my-custom-image-size' );

sprawdzanie stylów i skryptów

wcześniej stwierdziliśmy, że lepiej jest sprawdzać style i skrypty niż kodować je bezpośrednio do plików szablonów. To dlatego, że zapytanie pozwala na dużo większą elastyczność.

po prawidłowym wykonaniu zapytania informuje również WordPressa, które zasoby są ładowane. Gdy WordPress wie, które zasoby są potrzebne, może upewnić się, że ten sam zasób nie jest ładowany więcej niż raz. Jest to szczególnie ważne, gdy masz niezwykle popularną bibliotekę, taką jak jQuery lub FontAwesome, z której będzie korzystać wiele motywów i wtyczek.

Kolejną zaletą zapytania jest to, że zasób, który jest pytany, może zostać usunięty przez wtyczkę, unikając potrzeby modyfikowania plików szablonów.

chociaż nasz temat ma styl.plik css jeszcze go nie używa, zapytajmy teraz:

function my_custom_theme_enqueue() { wp_enqueue_style( 'my-custom-theme', get_stylesheet_uri() );}add_action( 'wp_enqueue_scripts', 'my_custom_theme_enqueue' );

get_stylesheet_uri() Jest funkcją pomocniczą, która pobiera URI arkusza stylów bieżącego motywu. Gdybyśmy pytali o inny plik, musielibyśmy zrobić to zamiast tego:

wp_enqueue_style( 'my-stylesheet', get_template_directory_uri() . '/css/style.css' );

nasz temat nie ma żadnych skryptów, gdyby tak było, zapytalibyśmy ich w ten sposób:

function my_custom_theme_enqueue() {wp_enqueue_style( 'my-custom-theme', get_stylesheet_uri() );wp_enqueue_script( 'my-scripts', get_template_directory_uri() . '/js/scripts.js' );}add_action( 'wp_enqueue_scripts', 'my_custom_theme_enqueue' );

wyjątkiem od powyższego są skrypty, które zostały wstępnie zarejestrowane przez WordPress, w takich przypadkach wystarczy podać tylko pierwszy parametr ($handle):

wp_enqueue_script( 'jquery' );

Dodawanie stylu za pomocą CSS

nasz motyw ma mocne podstawy, ale nie ma żadnego projektu, dodając kilka podstawowych CSS do stylu.css zrobi ogromną różnicę. Dodaliśmy około ~ 100 linii CSS do naszego przykładowego motywu jako demonstrację, a wynik wygląda tak:

Tag tytułowy

wszystkie motywy powinny wykorzystywać wbudowaną funkcjonalność WordPressa do generowania znacznika tytułowego, który jest włączony przez dodanie tego kodu do funkcji.plik php: add_theme_support( 'title-tag' );to wszystko, WordPress obsłuży wyjście strony < tytuł> i w razie potrzeby wtyczki mogą modyfikować wyjście za pomocą filtrów. Wtyczki SEO często robią to w celu dalszej optymalizacji tytułów.

Krok #3: Dodaj części szablonu

teraz 80% naszego kodu szablonu jest w indeksie.php.

chociaż to działa, spowoduje to wiele powtórzeń kodu, gdy mamy inne pliki szablonów, takie jak pojedyncza.php, Szukaj.php i Archiwum.php. Części szablonów ułatwiają tworzenie motywów, umożliwiając nam ponowne użycie kodu w szablonach. Ponieważ nasz nagłówek i stopka będą takie same na każdej stronie, są one idealnym kandydatem do korzystania z części szablonu. Najpierw Utwórz nagłówek.php i przenieś poniższy kod z indeksu.php:

<!DOCTYPE html><html <?php language_attributes(); ?>><head><meta charset="<?php bloginfo( 'charset' ); ?>"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="profile" href="<https://gmpg.org/xfn/11>"><?php wp_head(); ?></head> <header class="site-header"> <p class="site-title"> <a href="<?php echo esc_url( home_url( '/' ) ); ?>"> <?php bloginfo( 'name' ); ?> </a> </p> <p class="site-description"><?php bloginfo( 'description' ); ?></p><?phpwp_nav_menu( array( 'theme_location' => 'menu-1',) );?> </header><! – .site-header – >

w indeksie.php zamień powyższy kod na:

<?php get_template_part( 'header' ); ?>

Uwaga: dostając część szablonu, musisz pominąć .php z obsługi części szablonu.

następnie utwórz część szablonu stopki, przenosząc ten kod do stopki.php i powtarzanie powyższego procesu:

<?php wp_footer(); ?></body></html>

na koniec przeniesiemy również kod „bez wyników” do części szablonu, ponieważ prawdopodobnie będzie używany w wielu szablonach. Tworzenie treści-Brak.php i przenieść ten kod do nowego pliku.

<article class="no-results"> <header class="entry-header"> <h1 class="page-title"><?php esc_html_e( 'Nothing Found', 'my-custom-theme' ); ?></h1> </header><! – .entry-header – > <div class="entry-content"> <p><?php esc_html_e( 'It looks like nothing was found at this location.', 'my-custom-theme' ); ?></p> </div><! – .entry-content – ></article><! – .no-results – >

Twój indeks powinien teraz wyglądać tak:

<?php get_template_part( 'header' ); ?> <div class="site-content"> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <article <?php post_class(); ?>> <?php the_post_thumbnail(); ?> <header class="entry-header"> <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?> </header><! – .entry-header – > <div class="entry-content"> <?php the_content( esc_html__( 'Continue reading &rarr;', 'my-custom-theme' ) ); ?> </div><! – .entry-content – > </article><! – #post-## – > <?php // If comments are open or we have at least one comment, load up the comment template. if ( comments_open() || get_comments_number() ) : comments_template(); endif; endwhile; else : get_template_part( 'content-none' ); endif;?></div><! – .site-content – ><?phpget_sidebar();get_template_part( 'footer' );

podczas gdy powyższe będzie działać idealnie, istnieje niewielka poprawa możemy zrobić. WordPress ma funkcje pomocnicze do włączenia części szablonu nagłówka, stopki i paska bocznego. Ponieważ jest to najlepsza praktyka, aby korzystać z podstawowych funkcji, gdzie to możliwe, powinniśmy użyć tych zamiast.

Zamień get_template_part( 'header' ); na get_header(); i get_template_part( 'footer' ); na get_footer();

Krok #4: dodaj liczbę pojedynczą.php, archiwum.php, Szukaj.php i 404.php

grunt, który wykonaliśmy z częściami szablonów, przyniesie korzyści, gdy dodamy nowe pliki szablonów do naszego motywu. Poniżej wymieniliśmy najczęstsze. Aby uniknąć przytłoczenia Cię przykładami kodu, zamiast tego podlinkowaliśmy kod źródłowy na Githubie.

php

posty i strony, gdy są wyświetlane na własnych adresach URL, są uważane za „pojedyncze”, ponieważ przez większość czasu układ będzie taki sam dla obu tych typów stron. Ale w przypadku, gdy nie jest, możesz użyć bardziej konkretnej strony.php i single.zamiast tego php (post).

przykładowy kod-liczba pojedyncza.PHP

archiwum.php

Szablony archiwów zwykle różnią się od pojedynczych szablonów na dwa sposoby: pokazują fragmenty, a nie pełną treść i zawierają nagłówek archiwum wyjaśniający zawartość.

wróć do hierarchii szablonów, a zobaczysz, że szablon archiwum obejmuje wszystkie typy archiwów (autor, Kategoria, tag, Taksonomia, Data) jeśli to nie działa dla Twojego przypadku użycia, nadal możesz użyć bardziej konkretnych szablonów:

1. 1. • autor.Kategoria php
      • .PHP
      • tag.php
      • php
      • Data.php

przykładowy kod-archiwum.PHP

Szukaj.php

strony WordPress można przeszukiwać za pomocą ?s = parametr URL, na przykład yourwebsite.com?s=test. Poszukiwania.szablon PHP wyświetla wyniki tych wyszukiwań.

przykładowe wyszukiwanie kodu.php

404.PHP

polecenie else dodaliśmy w indeksie.php łapie błędy „page not found”, ale możesz chcieć oddzielić tę funkcjonalność do własnego pliku szablonu, aby mieć większą kontrolę nad wyjściem. To przypadek użycia 404.plik szablonu php.

Przykładowy Kod-404.php

Krok #5: pliki pomocnicze

jeśli rozpowszechniasz swój motyw publicznie, konieczne są następujące pliki. Bez nich Twój motyw zostanie odrzucony z repozytoriów motywów i rynków.

zrzut ekranu.png

zrzut ekranu jest wyświetlany na liście tematów wp-admin, gdy użytkownik wybiera nowy motyw. Oto kilka najlepszych praktyk, których powinieneś przestrzegać:

1. 1. • zrzuty ekranu powinny być 1200px x 900px
      • zrzuty ekranu powinny być w.png lub .format jpg
      • zrzuty ekranu powinny być dokładną reprezentacją motywu
      • zrzuty ekranu powinny być zoptymalizowane (użyj tinypng.com albo podobny)

readme.txt

WordPress nie wykorzystuje żadnych informacji z readme.txt, wyciąga wszystko, czego potrzebuje ze stylu.css. Z drugiej strony katalog motywów WordPress pobiera ważne informacje z pliku readme i uważa go za wymagany plik.

większość programistów używa readme.txt jako centralna lokalizacja do przechowywania wszystkich informacji na temat ich tematu. Prosty readme.txt wygląda tak:

=== Theme Name ===Requires at least: 5.0Tested up to: 5.2Requires PHP: 5.6License: GPLv2 or laterLicense URI: <https://www.gnu.org/licenses/gpl-2.0.html>Short description. No more than 150 chars.== Description ==Theme desc.== Changelog === 1.0 =* Added new option== Resources ==* normalize.css <https://necolas.github.io/normalize.css/>, (C) 2012-2016 Nicolas Gallagher and Jonathan Neal, (<https://opensource.org/licenses/MIT>)

1. 1. • wymaga co najmniej-jest to minimalna wersja WordPress, z którą twój motyw jest kompatybilny.
      • Tested up to-to pole oznacza najnowszą wersję WordPress Twój motyw został przetestowany z.
      • wymaga PHP-To pole oznacza minimalną wersję PHP, na której będzie działał Twój motyw.
      • Opis-To pole opisu nie jest obecnie nigdzie wyświetlane.
      • Changelog-changelog nie jest nigdzie używany, ale deweloperzy i niektórzy użytkownicy będą odwoływać się do tego pliku, aby zobaczyć, jakie zmiany zostały wprowadzone.
      • zasoby-większość zasobów stron trzecich wymaga pewnego rodzaju przypisania. Sekcja zasobów jest powszechnie akceptowanym miejscem do umieszczania tych. Nawet w przypadku zasobów, które nie wymagają wyraźnie atrybucji, nadal dobrą praktyką jest ich lista tutaj, aby użytkownicy byli świadomi licencji zasobów, z których korzystają.

Krok # 6: Tworzenie szablonów stron

szablony stron umożliwiają programistom tworzenie niestandardowych szablonów, które mogą być używane dla poszczególnych postów i stron. Na przykład większość motywów ma układ dwukolumnowy (content – sidebar), ale na niektórych stronach użytkownik może po prostu skupić się na treści i nie pokazywać paska bocznego. W tym może pomóc szablon strony.

jak powstają „Szablony Stron”?

w naszym folderze tematycznym utwórz nowy folder o nazwie 'page-templates’ i w tym folderze Utwórz plik o nazwie single-column.php. Aby przyspieszyć, skopiuj cały kod z liczby pojedynczej.php na stronę-szablony / jednokolumnowe.php i usuń wywołanie get_sidebar (), ponieważ ten szablon nie będzie tego potrzebował.

teraz musimy dodać specjalny nagłówek, który mówi WordPress jest to szablon strony, wygląda to tak:

/*Template Name: Single Column TemplateTemplate Post Type: post, page*/

kod jest oczywisty, po prostu mówimy WordPress nazwę szablonu i typy postów, z którymi można go używać.

to wszystko, nasz nowy szablon strony jest teraz dostępny w edytorze pod „atrybutami strony”.

Krok #7: spraw, aby Twój motyw był kompatybilny z RTL.css

nie wszystkie języki czytają od lewej do prawej. Na przykład język arabski i Hebrajski są odczytywane od prawej do lewej (RTL). Istnieje prosty sposób, aby Twój motyw był kompatybilny z językami RTL.

Utwórz nowy plik w folderze motywu o nazwie rtl.css, a następnie skopiuj i wklej następujący kod:

body {direction: rtl;unicode-bidi: embed;}

jeśli język RTL jest aktywnym językiem na stronie WordPress, WordPress wie, aby automatycznie załadować ten plik CSS.

jest to bardzo podstawowa implementacja funkcjonalności RTL na dobry początek. Jeśli chcesz dowiedzieć się więcej, oto dwa fantastyczne zasoby:

dokumentacja wsparcia języka od prawej do lewej

dwadzieścia dwadzieścia kod RTL

Krok #8: zawsze postępuj zgodnie z najlepszymi praktykami

najlepsze praktyki ewoluowały z czasem, aby ułatwić budowanie i utrzymywanie motywów WordPress. Przestrzeganie tych zasad nie tylko ci pomoże, ale także ułatwi innym programistom pracę z Twoim kodem.

1) Użyj motywów startowych

motywy startowe zapewniają solidną podstawę do zbudowania motywu. Zazwyczaj są lekkie, zawierają niewiele stylizacji i brak opcji konfiguracyjnych. Z czasem możesz zbudować własny motyw startowy, na którym możesz oprzeć wszystkie swoje projekty, ale na razie oto kilka popularnych opcji:

1. 1. • rusztowanie
      • HTML5 puste

2) Poznaj standardy kodowania WordPress

standardy kodowania są sposobem na formatowanie kodu w spójny sposób w całej bazie kodu. WordPress ma standardy kodowania HTML, CSS, Javascript i PHP. Chociaż używanie standardu kodowania nie ma wpływu na wrażenia użytkownika końcowego, sprawia, że kod jest o wiele bardziej czytelny. Nawet jeśli nie używasz standardów kodowania WordPress, zawsze zalecamy użycie standardu.

1. 1. • WordPress.org standardy kodowania
      • WPCS
      • standardy kodowania PHP

3) Użyj lokalizacji

dzięki ciężkiej pracy wolontariuszy, WordPress jest dostępny w setkach języków. Jeśli twój motyw ma zostać opublikowany publicznie, musi być zbudowany w sposób, który pozwala na jego przetłumaczenie.

nie martw się, to bardzo łatwe do zrobienia. Wszystko, co musimy zrobić, to upewnić się, że wszystkie ciągi są przekazywane przez 'funkcję lokalizacji’, a nie są wyprowadzane bezpośrednio.

zamiast tego:

<?php echo 'Previous Post'; ?>

zamiast tego robimy to:

<?php echo __( 'Previous Post', 'my-custom-theme' ); ?>

__() jest funkcją lokalizacji, która akceptuje ciąg znaków i domenę tekstową. Funkcja zwraca tłumaczenie podanego ciągu znaków lub oryginalnego ciągu znaków, jeśli tłumaczenie nie jest dostępne.

4) unikaj funkcjonalności wtyczek

gdy użytkownik zmienia motyw, powinna zmienić się tylko warstwa prezentacji. Treść i funkcjonalność powinny pozostać w większości takie same. Oznacza to, że każda funkcja, która wpływa na to, jak role WordPress powinny być zawarte we wtyczce, a nie w Twoim motywie. Niektóre przykłady funkcjonalności wtyczek obejmują:

1. 1. • niestandardowe typy postów
      • kreatory stron
      • udostępnianie w mediach społecznościowych
      • optymalizacja pod kątem wyszukiwarek (SEO)

chociaż może się wydawać wygodne (i być może Punkt sprzedaży) włączenie kontroli SEO w motywie, w rzeczywistości szkodzi to użytkownikowi w dłuższej perspektywie. W przyszłości będą musieli zmienić swój temat, ale nie mogą, ponieważ wszystkie ich konfiguracje SEO są ściśle powiązane z bieżącym tematem. W przeciwieństwie do tego, jeśli konfiguracje były przechowywane w wtyczce mogą zmienić motyw bez obaw.

5) Prefiksowanie (zapobieganie konfliktom)

aby zapobiec konfliktom, wszystkie funkcje, klasy i zmienne globalne utworzone przez motyw powinny być poprzedzone prefiksem. Jest to ważne, ponieważ nie można dowiedzieć się, jaki inny kod jest uruchomiony na Stronie Użytkownika. Prefiks zapobiega kolizjom nazw i krytycznym błędom.

nazwa Twojego motywu oddzielona myślnikami lub podkreślnikami będzie działać jako prefiks przez większość czasu. Jeśli nazwa motywu jest bardzo długa, Inicjały mogą działać.

Theme Name: Scaffoldclass Scaffold_Class {}function scaffold_function() {}global $scaffold_globalTheme Name: My Long Theme Nameclass MLTN_Class {}function mltn_function() {}global $mltn_global

6) Użyj podstawowej funkcjonalności

tam, gdzie istnieje, zawsze powinieneś używać podstawowej funkcjonalności, zamiast wymyślać koło na nowo. Obejmuje to między innymi paski boczne, menu nawigacji, miniatury postów, niestandardowe nagłówki i niestandardowe tła. Funkcje te zostały przetestowane przez miliony użytkowników i są aktywnie utrzymywane i ulepszane.

jeśli chcesz zmienić funkcjonalność lub wyjście funkcji podstawowej, możesz użyć jednego z wielu haków i filtrów, które oferuje WordPress. Na przykład wp_nav_menu() ma parametr 'walker’, więc możesz mieć pełną kontrolę nad wyjściem.

7) usuwanie i dezynfekcja danych

jako twórca motywów musisz być zaznajomiony z usuwaniem i dezynfekowaniem danych, aby chronić użytkowników przed potencjalnymi exploitami.

Ucieczka

Ucieczka to proces sprawdzania, czy dane są bezpieczne przed ich wyjściem, a dezynfekcja to sprawdzanie danych przed ich zapisaniem w bazie danych.

WordPress ma funkcje pomocnicze, których możesz użyć do ucieczki danych, więc nie musisz ich samodzielnie budować. esc_html jest jednym z przykładów funkcji Escape. Tak wygląda nieosłonięte wyjście:

echo get_theme_mod( 'error_page_title' );

aby uciec od wyjścia, robimy to:

echo esc_html( get_theme_mod( 'error_page_title' ) );

niektóre inne funkcje, których powinieneś znać, to esc_attr(), absint (), esc_url ().

możliwe jest również tłumaczenie i ucieczka ciągu za pomocą jednej funkcji:

echo esc_html( __( '404 Not Found', 'my-custom-theme' ) );

staje się:

echo esc_html__( '404 Not Found', 'my-custom-theme' );// oresc_html_e( '404 Not Found', 'my-custom-theme' );

Wskazówka: gdziekolwiek w temacie, gdzie masz echo $, powinieneś sprawdzić, czy nie ma potrzeby ucieczki, zwykle tak jest.

odkażanie

jeśli dodasz ustawienia do swojego motywu, musisz upewnić się, że dane wprowadzane przez użytkowników do tych ustawień są bezpieczne, zanim wejdą do bazy danych. WordPress ma wiele funkcji, które pomagają w dezynfekcji danych wejściowych.

podczas dodawania ustawienia do motywu za pomocą interfejsu API dostosowywania ma parametr o nazwie 'sanitize_callback’, który akceptuje nazwę funkcji dezynfekcji. Wszelkie dane wejściowe, które przyjmuje ustawienie, są sprawdzane przez funkcję, którą podasz do 'sanitize_callback’ przed wejściem do bazy danych.

podkreśla znaczenie dezynfekcji, że jeśli nawet w jednym z Twoich ustawień brakuje dezynfekcji, nie zostanie ona zaakceptowana do katalogu motywów WordPress.

$wp_customize->add_setting( 'my_custom_theme_setting', array( 'sanitize_callback' => 'sanitize_text_field' // A core sanitization function. ));

oficjalna lista funkcji dezynfekcji i ucieczki można zobaczyć tutaj: dezynfekcja danych/Ucieczka

Krok #9: rozpowszechniaj swój motyw WordPress

motywy mogą być dystrybuowane za pośrednictwem różnych kanałów w zależności od wyniku, który chcesz osiągnąć. Jeśli twoim rezultatem jest po prostu przyczynienie się do społeczności open-source, nie ma lepszego sposobu na to niż przesłanie motywu do katalogu WordPress. Jeśli zamiast tego chcesz sprzedać swój motyw i bezpośrednio zarabiać pieniądze, istnieją sposoby, aby to zrobić.

oto wiodące strony w dystrybucji tematów:

1) WordPress.org (najlepsze miejsce, aby pobrać pliki do pobrania i użytkowników)

podstawową zaletą hostingu motywu na WordPress jest to, że uzyskujesz wzrost widoczności dzięki motywowi widzianemu nie tylko w wordpress.strona org, ale także w panelu wp-admin.

Kolejną zaletą hostingu motywu w WordPress jest wbudowany system aktualizacji. Jeśli zaktualizujesz swój motyw, wszyscy użytkownicy zostaną powiadomieni w ich pulpitach nawigacyjnych wp-admin i otrzymają łatwą ścieżkę do aktualizacji do najnowszej wersji.

WordPress.org akceptuje tylko darmowe motywy, ale to nie znaczy, że nie możesz zarabiać pieniędzy. Darmowy motyw może być świetnym kanałem do promowania Twojego motywu premium, wtyczki lub usługi.

2) WordPress.com

WordPress.com hostuje zarówno darmowe, jak i premium motywy. Jednak od kilku lat nie są one otwarte na nowe zgłoszenia autorów.

3) ThemeForest

ThemeForest jest wiodącym rynkiem dla motywów premium. Najlepiej sprzedający się motyw (Avada)ma sprzedaż przekraczającą $5,000,000.

ogólnie rzecz biorąc, kupujący na temat lasu oczekują w pełni funkcjonalnych” wielofunkcyjnych ” tematów. Wszystkie najlepsze motywy mają funkcjonalność kreatora stron i są obsługiwane przez zespoły programistów. To bardzo trudny rynek dla nowych autorów.

4) Creative Market i Mojo Marketplace

Creative Market i Mojo Marketplace są małymi graczami na rynku motywów premium, dlatego pogrupowaliśmy je razem. Oba oferują te same usługi Co ThemeForest, ale na mniejszą skalę.

5) Github

Github to najprostszy sposób na upublicznienie darmowego motywu. Nie ma procesu przeglądu i żadnych wytycznych do naśladowania. Jednak nie skorzystasz z widoczności wordpress.org i będzie musiał zbudować własny mechanizm aktualizacji, aby użytkownicy mogli uzyskać najnowsze wersje.

krok #10: Testuj i ulepsz Kod

1) testowanie motywu

test jednostki motywu

test jednostki motywu to standardowy plik importu zawartości WordPress, który zawiera szeroki zakres typów treści i przypadków brzegowych. Jest łatwy do przesłania do środowiska programistycznego i podkreśli wiele scenariuszy, które mogłeś przeoczyć.

WP_DEBUG

jako twórca motywów, testowanie motywu z włączoną funkcją WP_DEBUG to absolutne minimum, które powinieneś robić. Twój motyw nie powinien zwracać żadnych błędów ani ostrzeżeń, gdy WP_DEBUG jest ustawiony na true.

ważne jest również, aby powtórzyć test z różnymi wersjami PHP, które obsługuje Twój motyw. Z każdym głównym wydaniem PHP pojawiają się nowe zmiany, ostrzeżenia i amortyzacja. Często zdarza się, że motyw jest wolny od błędów w PHP5.6, ale pokazuje błędy w PHP7.

aby włączyć WP_DEBUG, Dodaj następujący kod do wp-config.php:

DEFINE( 'WP_DEBUG', true );

Monster Widget

Monster Widget to pomocna wtyczka, która pozwala dodać 13 podstawowych widżetów do paska bocznego na raz. Podstawowe widżety używają różnych elementów HTML, co czyni je idealnymi do testowania Twojego motywu.

Theme Sniffer

Theme Sniffer to wtyczka stworzona przez Theme Review Team (TRT). Wyłapuje wiele (ale nie wszystkie) błędów ucieczki i lokalizacji. Sprawdza również Twój motyw pod kątem standardów kodowania WordPress.

2) Zgłoś swój temat do WordPress.org

na początku tego przewodnika powiedzieliśmy, że zanim dotrzesz do końca, będziesz miał motyw, do którego możesz się zgłosić wordpress.org. spójrzmy na ten proces.

proces przesyłania

proces przesyłania jest prosty. Utwórz lub zaloguj się na swoje konto WordPress, a następnie przejdź do tej strony– https://wordpress.org/themes/upload/

możesz spakować swój motyw i przesłać go teraz, ale oto kilka rzeczy, które możesz chcieć wiedzieć najpierw.

wymagania

zespół Theme Review (TRT) ma ścisły zestaw wymagań. Twój motyw nie zostanie zaakceptowany do katalogu, dopóki nie spełni wszystkich wymagań.

proces recenzowania

kiedy przesyłasz motyw, musisz przejść dwuetapowy proces recenzowania, zanim zostanie zaakceptowany do katalogu.

po naciśnięciu przycisku Prześlij następuje automatyczne sprawdzenie. Za kulisami automatyczny kontroler działa w bardzo podobny sposób do wtyczki Theme Sniffer. Jeśli znajdzie jakieś błędy, odrzuci motyw i proces przesyłania zakończy się tam.

jeśli twój motyw przejdzie automatyczne sprawdzanie, dołącza do kolejki motywów czekających na ludzką recenzję. Human review jest uzupełniany przez wolontariuszy z TRT. Liczba motywów w kolejce znacznie przekracza liczbę recenzentów, co oznacza, że często może upłynąć 2-3 miesiące, zanim motyw dotrze do przodu kolejki.

konieczne jest, aby Twój motyw był wolny od błędów i spełniał wszystkie wymagania, zanim osiągnie etap ludzkiej recenzji, tak jakby miał więcej niż 3 znaczące błędy, które można odrzucić. Jeśli temat zostanie odrzucony na etapie ludzkiej recenzji, musi on ponownie dołączyć do kolejki z tyłu, co oznacza ponowne oczekiwanie 2-3 miesięcy na kolejną ludzką recenzję.

Przydatne Zasoby: Najczęstsze błędy w tworzeniu motywów WordPress(i jak je naprawić)

warto zauważyć, że TRT zawsze szuka nowych recenzentów, Wolontariat może być wspaniałym doświadczeniem edukacyjnym i sposobem na przyczynienie się do społeczności open-source.

3) Twoja lista motywów

Gratulacje, Twój motyw został zatwierdzony! Masz teraz własną listę, która wygląda tak.

oto przegląd tego, czego możesz się spodziewać na tej stronie:

1. 1. • zrzut ekranu – zrzut ekranu jest pierwszą rzeczą, którą widzą potencjalni użytkownicy, więc zrób to tak atrakcyjne, jak to możliwe. Ale pamiętaj, że nadal musi to być dokładne odwzorowanie motywu, a nie renderowanie w Photoshopie. Zainspiruj się najpopularniejszymi motywami.
      • Description-Opis, który jest pobierany ze stylu.css jest idealnym miejscem do opisania Twojego motywu i jego kluczowych cech. Pomaga również wymienić zalecane lub wymagane wtyczki tutaj. Opis nie obsługuje formatowania (pogrubienie, kursywa, hiperłącza), a nawet łamania linii.
      • Tagi-jest to reprezentacja tagów wymienionych w stylu.css. Tylko te tagi tutaj są akceptowane.
      • przycisk podglądu-podgląd jest generowany przez wordpress.org i jako twórcy motywów, nie mamy kontroli nad wyjściem. Niestety, ponieważ podgląd korzysta z podstawowej zawartości i nie ma konfiguracji, często skutkuje to mniej niż doskonałym podglądem.
      • link do strony głównej motywu – adres URL przycisku podglądu jest pobierany z pola 'Theme URI’ w Twoim stylu.css. Istnieją surowe wymagania, że ten adres URL musi być używany tylko do wyświetlania strony wyświetlającej informacje o Twoim motywie.
      • aktywne instalacje-jest to liczba stron aktywnie korzystających z tematu. Liczba jest zaokrąglana do najbliższych dziesięciu, stu lub tysięcy. Nie można znaleźć dokładnej liczby.
      • pobrań dziennie – tyle razy został pobrany Twój motyw. „Pobieranie” może być nowym pobraniem lub aktualizacją motywu.
      • recenzje-aby użytkownik zostawił opinię, musi być zalogowany do a wordpress.org konto. Ogólnie rzecz biorąc, recenzje są trudne do uzyskania, chyba że wyraźnie poprosisz użytkowników o ich przesłanie.
      • wsparcie – wbudowana platforma wsparcia jest świetna do zarządzania i rozwiązywania problemów z Twoim motywem. Użytkownik musi być zalogowany, aby utworzyć wątek pomocy technicznej.
      • tłumaczenia-Platforma tłumaczeń to fantastyczne źródło informacji. Jeśli zostały następujące porady w całym tym przewodniku do lokalizacji tematu następnie użytkownicy będą mogli przetłumaczyć go na inne języki i rozszerzyć swoją potencjalną bazę użytkowników poza tylko anglojęzycznych użytkowników.

4) Aktualizacja motywu

po wprowadzeniu zmian do motywu w przyszłości i konieczności aktualizacji wersji hostowanej na WordPress Proces jest prosty.

najpierw zaktualizuj pole 'Version:’ i changelog w readme.txt. Następnie spakuj plik i prześlij go ponownie, korzystając z tej samej strony przesyłania, co wcześniej.

system rozpozna ją jako aktualizację i automatycznie ją zatwierdzi, aby nie wymagała kolejnej ludzkiej recenzji.