Jak stworzyć niestandardowy motyw WordPress

Opublikowany: 2021-08-06

WordPress zajmuje ogromny procent światowych witryn internetowych, stanowiąc 37% wszystkich witryn obecnie online. Chociaż istnieje wiele przyczyn i czynników tego sukcesu, jednym z głównych powodów jest popularność funkcji dostępnych dla wszystkich użytkowników. Wtyczki, motywy, posty, strony, kategorie, taksonomie, role użytkowników i obsługa multimediów, żeby wymienić tylko kilka. Aby jak najlepiej wykorzystać WordPress, zaleca się, aby użytkownicy przestudiowali i nauczyli się korzystać ze wszystkich tych funkcji. W tym blogu skupimy się i omówimy motywy WordPress oraz przeprowadzimy Cię przez podstawy wymagane do tworzenia niestandardowego motywu WordPress.

Co to jest motyw niestandardowy?

Wszystko w interfejsie witryny jest uruchamiane i kontrolowane za pomocą czegoś, co nazywa się „motywem”. Motyw strony odpowiada za specyficzny wygląd i funkcjonalność strony. Możesz sprawdzić repozytorium motywów WordPress lub Themeforest , aby uzyskać przykłady motywów; tutaj znajdziesz tysiące wymienionych motywów, które możesz przeglądać i pobierać.

Chociaż ustalone motywy WordPress są świetne, jeśli masz umiejętności i potrzeby, możesz również zbudować własny niestandardowy motyw dla klienta, dla siebie lub przesłać go na rynki z zamiarem sprzedaży. Tworząc motyw komercyjny, musisz przestrzegać wytycznych marketplace’ów dotyczących standardów kodowania, struktury plików i folderów itp. Więcej informacji na temat tych wytycznych znajdziesz na stronach internetowych marketplace’ów .

Na tym blogu przeprowadzimy samouczek, aby pokazać podstawowe informacje na temat tworzenia własnego motywu WordPress, obejmując wszystkie podstawy i kroki związane z procesem.

Utwórz niestandardowy motyw WordPress

Motywy WordPress są zbudowane z plików szablonów, skryptów, stylów, obrazów itp. Aby kontynuować, powinieneś mieć praktyczną wiedzę na temat PHP, HTML i CSS, które są wymagane do zbudowania niestandardowego motywu. Dodatkową zaletą może być także zrozumienie JavaScriptu.

Na początek nazwiemy temat „Updraft”. Utwórz folder o nazwie „Updraft” wewnątrz wp-content/themes . W tym folderze „Updraft” napiszesz kod związany z motywem, będziesz przechowywać pliki, obrazy, czcionki itp.

Główne pliki niestandardowego motywu WordPress to:

styl.css
index.php
funkcje.php

Style.css będzie głównym plikiem arkusza stylów i możesz dodać do niego wszystkie swoje CSS. Pamiętaj, że musisz dołączyć nagłówek informacji o motywie. Nagłówek powinien wyglądać podobnie do poniższego formatu i znajdować się na górze style.css .

 [kod]
/*
Nazwa motywu: Aktualizacja
URI motywu: https://updraftplus.com
Autor: UpdraftPlus
URI autora: https://updraftplus.com
Opis: niestandardowy motyw utworzony dla witryny internetowej.
Wersja: 1.0
Licencja: Powszechna Licencja Publiczna GNU v2 lub nowsza
URI licencji: http://www.gnu.org/licenses/gpl-2.0.html
Domena tekstowa: updraft
*/
[/kod]

Następnie przejdź do Wygląd >> Motywy, gdzie zobaczysz swój motyw. Aktywuj to. Kiedy sprawdzisz frontend swojej witryny, pokaże się pusty ekran – ponieważ nie dodaliśmy jeszcze niczego do motywu..

Pamiętaj o przechowywaniu obrazów, skryptów i stylów w katalogu motywów. Katalog motywów odnosi się do folderu „wp-content/themes/Updraft”. Upewnij się, że są one uporządkowane, korzystając z dobrej struktury folderów, tworząc określone foldery dla obrazów, skryptów i stylów; Skopiuj pliki do odpowiedniego katalogu.

Plik funkcji

Functions.php to plik , w którym możesz dodać kod do różnych celów. Ten plik jest automatycznie ładowany podczas inicjalizacji WordPressa, a napisany w nim kod jest wykonywany automatycznie.

Następujące operacje w pliku functions.php są zwykle wykonywane w tej kolejności:

Umieść w kolejce arkusze stylów i skrypty motywu (dodaj pliki JS i CSS do strony).
Włącz paski boczne, menu nawigacyjne, miniatury wpisów itp.
Zdefiniuj funkcje używane w całej aplikacji.
Itp.

Użytkownik może dodać swoje style i skrypty z pliku functions.php w następujący sposób. Proszę zobaczyć poniższy link, aby uzyskać więcej dokumentacji .

 [kod]
funkcja include_js_css() {
wp_register_style( "bootstrap", get_stylesheet_directory_uri() .
"/style/bootstrap.min.css", array(), false, "all" );
wp_enqueue_style( "bootstrap" );
wp_register_script('bootstrap', get_stylesheet_directory_uri() .
'/skrypty/bootstrap.min.js', array(), fałsz, prawda);
wp_enqueue_script('bootstrap');
}
add_action('wp_enqueue_scripts', 'include_js_css');
[/kod]

Funkcja get_stylesheet_directory_uri() podaje względną ścieżkę katalogu aktywnego motywu. Reszta kodu może być postrzegana jako ścieżka zasobów.

Podobnie w przypadku dodawania menu nawigacji, miniatury wpisów:

 [kod]
funkcja updraft_theme_setup() {
add_theme_support( 'post-miniaturki' );
register_nav_menus(
szyk(
'podstawowe' => __( 'Główne Menu' ),
'footer1=' => __( 'Menu stopki' ),
'sklep' => __( 'Menu strony sklepu' ),
)
);
}
add_action( 'after_setup_theme', 'updraft_theme_setup' );
[/kod]

Następnie przejdź do pulpitu WordPress i dodaj post lub stronę. Powinieneś zobaczyć sekcję „Polecany obraz”. Dodatkowo w sekcji Wygląd >> Menu znajdziesz menu główne i menu stopki w obszarze Zarządzaj lokalizacjami .

To tylko kilka podstawowych funkcji, które możesz uwzględnić podczas korzystania z pliku „Funkcja”. Jeśli chcesz, możesz dodać do tego o wiele więcej.

Pliki szablonów

Podczas tworzenia motywu pliki szablonów mogą być używane do wpływania na układ i projekt różnych części witryny. Na przykład, możesz użyć szablonu header.php, aby utworzyć nagłówek, lub szablonu comments.php, aby umieścić komentarze w swojej witrynie. Pliki szablonów mają rozszerzenie .php . Ponieważ są to pliki PHP, wszystkie strony są wyświetlane w formacie HTML.

Korzystając z szablonów, programiści mogą dystrybuować kod między wieloma plikami. Poniżej wymieniono niektóre z kwestionowanych plików.

index.php : Główny szablon. Ten plik powinien być odpowiedzialny za umieszczenie wpisu. Gdy ustawisz stronę Posty w Ustawieniach >> Odczyty , ten szablon zostanie wykonany.
page.php : Ten szablon jest odpowiedzialny za renderowanie twoich stron. To ustawienie można zmienić, przypisując niestandardowy szablon strony do poszczególnych stron.
single.php : Używany, gdy odpytywany jest pojedynczy post.
header.php : Dodaj swoją część nagłówka w tym szablonie.
footer.php : Dodaj swoją stopkę w tym szablonie.
sidebar.php : Dodaj widżety w tym szablonie.

Listę wszystkich dostępnych szablonów znajdziesz tutaj .

Niestandardowe szablony stron

Domyślnie wszystkie twoje strony są renderowane za pomocą szablonu page.php . Ale w praktyce czasami trzeba wyświetlać osobne przepływy na różnych stronach. W tym scenariuszu zaleca się korzystanie z możliwości niestandardowych szablonów stron.

Na przykład, jeśli masz stronę „Kariera” i chcesz dodać swój kod do tej strony; aby to osiągnąć, musisz utworzyć plik career.php w katalogu motywów i umieścić poniższy komentarz na górze pliku.

 [kod]
<?php
/*
Nazwa szablonu: Kariera
*/
[/kod]

Następnie przejdź do sekcji edycji strony i przypisz ten szablon „Kariera” z pola Atrybuty strony .

Teraz, gdy wejdziesz na stronę Kariera – zostanie wykonany kod z kariery.php .

Plik nagłówkowy

Twoja witryna będzie miała wspólny nagłówek na wszystkich stronach. Możesz umieścić ten wspólny nagłówek w pliku header.php . Kod nagłówka będzie wyglądał mniej więcej tak:

 [kod]
<!DOCTYPE html>
<html <?php atrybuty_języka(); ?>>
<głowa>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=szerokość urządzenia, początkowa skala=1.0" />
<?php wp_head(); ?>
</head>
<ciało <?php body_class(); ?>>
<?php wp_body_open(); ?>
<!-- Twoje menu -->
[/kod]

W powyższym kodzie zauważysz, że wykorzystaliśmy niektóre funkcje dostępne w WordPressie.

wp_head() : Ta metoda wstawia kluczowe elementy do twojego dokumentu – np. skrypty, style i metatagi.
body_class() : To doda różne klasy do elementu body.
wp_body_open() : Służy do wstawiania kodu natychmiast po otwarciu tagu body. Przykładem może być skrypt Google Analytics.

Menu można dodawać dynamicznie za pomocą funkcji wp_nav_menu() . Zakładając, że utworzyłeś już menu w Wygląd >> Menu i przypisałeś do niego lokalizację „podstawową”. Poniższy kod dynamicznie generuje elementy menu.

 [kod]
<?php
wp_nav_menu(
szyk(
'theme_location' => 'podstawowy',
'container_class' => 'menu',
)
);
?>
[/kod]

Po ustawieniu pliku nagłówkowego użyj funkcji get_header() , aby dołączyć ten plik do innych szablonów.

Plik stopki

Podobnie jak w przypadku pliku nagłówkowego, twój wspólny kod dla stopki zostanie umieszczony w szablonie footer.php .

 [kod]
<!-- elementy stopki -->
<?php wp_footer(); ?>
</body>
</html>
[/kod]

Tutaj użyj wp_footer() , która wstawia elementy, w szczególności skrypty, w tej lokalizacji. Użycie get_footer() spowoduje uwzględnienie zawartości tego pliku w innych miejscach.

Plik paska bocznego

Pasek boczny to pionowa kolumna służąca do wyświetlania informacji w witrynie, które nie są wyświetlane w głównej treści. Może zawierać popularne artykuły, banery reklamowe, formularz przesyłania biuletynu itp. Paski boczne zawierają widżety, które administrator może dostosować. Szablon sidebar.php będzie zawierał widżety Twojej witryny.

W tym przykładzie utworzymy podstawowy pasek boczny, dodając poniższy kod do pliku functions.php .

 [kod]
funkcja updraft_widgets_init() {
register_sidebar(
szyk(
'name' => esc_html__( Home Sidebar' ),
'id' => 'pasek boczny-1',
'description' => esc_html__( 'Dodaj widżety tutaj, aby pojawiały się na pasku bocznym.' ),
'before_widget' => '<section class="widget">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
)
);
}
add_action( 'widgets_init', 'updraft_widgets_init' );
[/kod]

Następnie przejdź do Wygląd >> Widgety . Tutaj znajdziesz powyższy pasek boczny. W tym przykładzie dodamy kilka widżetów do tego paska bocznego. Aby dodać ten pasek boczny do frontendu, dodaj następujący kod w sidebar.php.

 [kod]
<div class="pasek boczny">
<?php
if ( is_active_sidebar( 'sidebar-1' ) ) {
dynamic_sidebar( 'pasek boczny-1' );
}
?>
</div>
[/kod]

Na koniec pamiętaj, aby nazwać metodę „ get_sidebar()” , aby w razie potrzeby łatwo umieścić pasek boczny na innych stronach.

Renderowanie stron i postów

Jak już wspomniano, wszystkie strony WordPress są renderowane i wykonywane przy użyciu kodu, który napisałeś w pliku page.php , z wyjątkiem stron z niestandardowym szablonem strony. Poniższy kod jest przykładem, który pokaże stronę zawierającą tytuł strony, opis i polecany obraz.

 [kod]
<?php
pobierz_nagłówek();
?>
<div class="content-area">
<main class="site-main">
<?php
while ( have_posts() ):
Poczta();
?>
<?php
if ( has_post_thumbnail() ):
the_post_thumbnail();
endif;
?>
<header class="entry-header">
<?php tytuł_(); ?>
</header>
<div class="entry-content">
<?php zawartość_(); ?>
</div>
<?php
koniec;
?>
</main>
</div>
<?php
pobierz_stopkę();
[/kod]

Podobny kod zostanie umieszczony w pliku single.php , aby wyświetlić informacje o wpisie. Aby poprawnie renderować listing postów (twój index.php ), oprócz powyższych metod – możesz również użyć następujących:

the_catgeory() : Wyświetla listę kategorii dla posta.
the_permalink() : Wyświetla permalink dla bieżącego posta.
the_excerpt() : Wyświetla fragment posta.

I18n dla niestandardowych motywów WordPress

Budując niestandardowy motyw, postaraj się pamiętać, że powinien on być opracowany w taki sposób, aby wspierać internacjonalizację. W ten sposób można łatwo przetłumaczyć motyw na inne języki.

Aby dodać obsługę I18n, pamiętaj, aby użyć domeny tekstowej, z której możesz analizować pliki źródłowe i wyodrębniać z nich możliwe do przetłumaczenia ciągi. W tym przykładzie używamy domeny tekstowej „Updraft”, ale możesz wybrać dowolny unikalny identyfikator. Możemy zdefiniować domenę tekstową w następujący sposób.

 [kod]
funkcja i18n_setup() {
load_theme_textdomain( 'updraft', get_stylesheet_directory() . '/języki' );
}
add_action( 'after_setup_theme', 'i18n_setup' );
[/kod]

Teraz za każdym razem, gdy używasz statycznych ciągów w plikach motywów, zapakuj je w funkcje __() lub _e() .

 [kod]
<h2><?php _e('Imię', 'draft); ?></h2>
<?php echo __('E-mail użytkownika', 'updraft'); ?>
[/kod]

Dostępne są specjalne narzędzia, takie jak POEDIT, które pomagają generować przetłumaczone pliki językowe. Więcej informacji znajdziesz na tym blogu .

W tym blogu omówiono podstawy tworzenia niestandardowych motywów WordPress. Jest to jednak obszerny temat, który wymaga dużo czasu i cierpliwości. Poniżej znajduje się kilka pomocnych zasobów, z którymi powinieneś się zapoznać, które pomogą Ci zacząć tworzyć motywy WordPress..

Pętla WordPressa
Tagi szablonów
Strony kategorii
Funkcja_Referencja
Tag warunkowy
Standardy kodowania WordPress

Tworząc nowy motyw dla swojej witryny WordPress, pamiętaj, że będziesz musiał wykonać kopię zapasową po każdej zmianie lub ryzykujesz utratę całej swojej pracy. Użyj UpdraftPlus – wiodącej i najbardziej zaufanej wtyczki do tworzenia kopii zapasowych, przywracania i klonowania WordPress.

Wpis Jak stworzyć niestandardowy motyw WordPress pojawił się jako pierwszy w UpdraftPlus. UpdraftPlus – Wtyczka do tworzenia kopii zapasowych, przywracania i migracji dla WordPress.