Tworzenie i rozwijanie motywu w WordPress może być bardzo proste, jeśli masz trochę wiedzy na temat HTML, CSS i JavaScript. Mimo to niektórzy początkujący mogą również ukończyć tę misję z odpowiednimi instrukcjami. Wystarczy mieć odpowiednio skonfigurowane środowisko programistyczne i zainstalowany system CMS (Content Management System).
WordPress jest jednym z najczęściej używanych systemów zarządzania treścią typu open-source na świecie — około 34.,Działa na nim 7% wszystkich stron internetowych. Posiada narzędzia do budowania witryny i pozwala dodawać różne funkcje za pomocą wtyczek i innych zasobów, które dostosowują układ, zwiększają wydajność i gwarantują wykwalifikowane doświadczenie dla odbiorców.
w tym artykule pokażemy Ci pierwsze kroki, aby stworzyć motyw WordPress, dzięki czemu możesz mieć stronę internetową o unikalnym wyglądzie. Sprawdź:
- jakie są wymagania, aby utworzyć motyw WordPress?
- jakie są główne kroki tworzenia motywu WordPress?
- jakie narzędzia mogą pomóc w stworzeniu motywu WordPress?,
kontynuujemy?
jakie są wymagania, aby utworzyć motyw WordPress?
aby utworzyć motyw WordPress, musisz mieć skonfigurowane środowisko programistyczne z zainstalowanym Apache, PHP, MySQL i WordPress. Możesz pobrać WordPress z oficjalnej strony internetowej — musisz zaktualizować poświadczenia bazy danych.
musisz również znać strukturę motywu. Zasadniczo motyw WordPress jest normalną stroną, utworzoną w HTML i, jak każdy inny, jest utworzony przez następujące pliki:
- nagłówek.php: przechowuje kod nagłówka;
- stopka.,php: przechowuje kod stopki;
- pasek boczny.php: miejsce, w którym ustawione są przyciski dodane z boku strony; Styl
- .css: kontroluje wizualną prezentację tematu;
- index.php: zawiera ustawienia wyświetlane na stronie głównej;
- single.php: zawiera kody, które pokazują artykuł na własnej stronie;
- strona.php: zawiera kody pokazujące zawartość pojedynczej strony;
- archiwum.php: wyświetla listę artykułów znajdujących się w archiwum, kategorie utworzone przez użytkownika;
- funkcje.,php: lokalizacja, w której znajdują się funkcje, które dodają więcej funkcjonalności do motywów, takie jak logo, menu, kolor, miniatury, skrypty i arkusze stylów;
- 404.php: kod błędu, który pokazuje, że żądany plik nie został znaleziony.
ponadto będziesz musiał zintegrować niektóre ustawienia Bootstrap, aby dostosować szablon. W tym artykule nauczymy Cię pierwszych kroków do tego dostosowania. Patrz poniżej.
jakie są główne kroki, aby utworzyć motyw WordPress?,
poniżej znajdują się kroki, aby utworzyć motyw WordPress, dopóki nie będzie można go dostosować.
Utwórz folder do przechowywania plików, które dodasz
Jeśli mamy zamiar zbudować nowy motyw, musimy wiedzieć, gdzie będą jego pliki w Twojej lokalnej instalacji. To całkiem proste.
wiemy, że instalacja WordPressa zwykle ma katalog główny, zwany także WordPressem. W tym katalogu znajdują się pliki i foldery, które pokażemy poniżej.,
pliki
foldery
- wp-admin
- wp-content
- wp-includes
folder, którego szukamy, to wp-content, w którym przechowywane są motywy i wtyczki. Wewnątrz znajduje się folder o nazwie motywy, który musi zawierać wszystkie motywy Twojej witryny WordPress, w tym ten, który utworzysz, aby system CMS rozpoznał nowe ustawienia.
w folderze themes są już zapisane trzy inne macierzyste foldery, które zawierają trzy standardowe motywy, dostarczone przez WordPress., Oprócz nich musisz utworzyć inny folder, który możesz nazwać, jak chcesz.
w poniższym przykładzie folder nosi nazwę customtheme. Od tego momentu zostanie utworzony nowy motyw WordPress.
ważne jest, aby nowy motyw znajdował się w folderze „motywy”. W ten sposób można go aktywować i używać online.
Utwórz styl.css i indeks.Pliki php
Każdy motyw WordPress ma serię obowiązkowych plików do poprawnego działania., W nowym folderze w ramach motywów utwórz dwa pliki:
- style.plik demo css-WP służy do informowania autora nazwy, repozytorium i wersji tematu;
- index.php-plik główny, przez który WP ładuje posty, które będą wyświetlane na ekranie. Ponadto jest używany przez wp, gdy brakuje pliku podstawowego WP.
style.css
Style.css jest deklaratywnym i niezbędnym plikiem CSS dla wszystkich motywów WordPress., Kontroluje prezentację-projekt wizualny i layout — stron internetowych. Oznacza to, że w tym pliku podasz informacje o motywie: nazwę motywu, autora, stronę autora i numer wersji(w tym przypadku, ponieważ nie aktualizujemy motywu, a zamiast tego tworzymy go od podstaw, możesz przypisać mu wersję 1), na przykład.,
Autor: napisz swoje imię, aby ludzie mogli się z Tobą skontaktować, jeśli są zainteresowani Twoim motywem;
Autor Uri: jeśli masz własną stronę internetową, możesz dodać ją w tej linii kodu;
Github motyw URI: interesujące jest dodanie motywu na Github, aby użytkownicy mogli dodawać nowe funkcje, sugerować ulepszenia i odpowiadać na pytania w tym środowisku współpracy, na przykład;
p >
opis: dodaj informacje o temacie, jeśli jest odpowiedni dla określonego rodzaju biznesu, bloga, e-commerce itp.,;
Wersja: 1.0.0.;
domena tekstowa: ważne jest, aby przetłumaczyć motyw na inne języki.
* /
indeks.php
ten plik jest odpowiedzialny za listę wszystkich wpisów na blogu. Musisz użyć natywnych funkcji WP, aby pokazać je na ekranie. Programiści są przyzwyczajeni do łączenia baz danych i tworzenia zapytań, aby uzyskać treść i wyświetlić ją, ale w tym przypadku istnieją już natywne funkcje w WordPress.
Utwórz indeks.,plik php i Wpisz cokolwiek w linii poleceń, aby sprawdzić, czy pojawi się w Twoim motywie po aktywacji.
<h1> Witaj świecie!</h1>
or
<h1> niestandardowy motyw!,</h1> jak w naszym przykładzie poniżej:
Aktywuj motyw na pulpicie nawigacyjnym WordPress
uzyskaj dostęp do Pulpitu nawigacyjnego WordPress, kliknij „wygląd”, a następnie „motywy” i sprawdź, czy utworzony motyw znajduje się wśród wyświetlonych opcji.
kliknij „Szczegóły motywu”, aby sprawdzić, czy informacje wprowadzone w stylu.plik css działa poprawnie.,
kliknij „Aktywuj”, aby nowy motyw został aktywowany przez WP, a następnie odwiedź stronę internetową, aby sprawdzić, czy ustawienia zostały zaimplementowane.
Zmień indeks.ustawienia pliku php
wróć do indeksu.wiersz poleceń php i usuń tekst, który właśnie napisałeś, aby sprawdzić, czy Twój motyw działa. Teraz musisz napisać wiersz poleceń dla WP, aby pobrać posty z bazy danych i wysłać je na stronę.,
celem jest odzyskanie tytułu postu i jego zawartości, aby wszystkie pliki mogły być przeglądane na stronie głównej.
polecenie „have_posts” mówi WP, że musi przeszukać bazę danych pod kątem wpisów na blogu. Jeśli są posty, będą wyświetlane na stronie. Jeśli nie, wyświetli wiadomość, którą napisaliśmy w kodzie dla warunku odpowiedzi negatywnej (false).,
istnieje funkcja o nazwie „the_post”, która musi być dodana do pętli whiledo „have_posts warunek” have_posts”. Dzięki tej pętli WordPress sprawdza posty i wyświetla je na stronie w razie potrzeby.
w praktyce działa to w następujący sposób: jeśli w bazie danych znajdują się posty, wszystkie polecenia wewnątrz pętli będą wykonywane dla wszystkich znalezionych plików postów i podczas ich odnalezienia., Otherwise, the WP informs the user that there are no posts. See the code below:
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post(); ?>
<h2><a href=”<?php the_permalink() ?,>”><?php the_title() ?></a></h2>
<?php the_content() ?>
<?,php endwhile;
else :
echo ‘<p>There are no posts!</p>’;
endif;
?>
Note that two functions are used in their most basic form in this loop: „have_posts” and „the_post”., Funkcja „have_posts” informuje, czy w bazie danych są jakieś posty do powtórzenia. Ta funkcja zwróci true lub false: jeśli zwróci true, dostępne są posty do wyświetlenia. Jeśli zwróci false, nie ma żadnych.
funkcja „the_post” pobiera najnowszy post i wykonuje niezbędne konfiguracje, aby był wyświetlany chronologicznie na stronie tematu. Ponieważ dzieje się tak w pętli, Gdy pojawi się nowy post, zostanie on dodany automatycznie, jeśli funkcja zwróci true.,
funkcja „the_content” dołącza zawartość do tytułu pliku wstawionego na stronie. Funkcja „the_permalink” dopasowuje link do każdego pojedynczego posta, dzięki czemu użytkownik może uzyskać dostęp do treści samodzielnie i bez wyświetlania pełnego tekstu na stronie głównej.
Jeśli chcesz dodać krótkie podsumowanie pod tytułem pliku, z pierwszymi 200 znakami zawartości, po prostu Wstaw funkcję ” the_excerpt „zamiast funkcji” the_content”. W ten sposób użytkownik ma dostęp do pełnego tekstu tylko po kliknięciu na link.,
w takim przypadku będziesz musiał utworzyć nowy plik w folderze szablonu, podobny do „index.php ” (nawet z tą samą linią kodu, wystarczy skopiować i wkleić indeks.pętli php i zmienić funkcję” the_excerpt ” na „the_content”).
Dodaj nagłówek i stopkę
następnym krokiem jest utworzenie nowych plików w tym samym folderze co motyw, w którym dodano styl plików.css i indeks.php. Nazywane są nagłówkami.php i stopka.php.,
dobrą praktyką jest zawsze dołączanie wp_head do swoich motywów, ponieważ jest to specjalna funkcja, która finalizuje wyjście w <Head> sekcja twojego nagłówka.plik php., Należy go użyć przed zamknięciem </head> tag, głównie w celu ułatwienia dodawania wtyczek do witryny, które mogą polegać na tym haku, aby dodać style, skrypty lub elementy meta do <head> area.
Stopka.php
stopka.plik php może zamknąć tagi używane w funkcjach, jak opisano poniżej:
Utwórz funkcje.,folder php
w tym momencie do niestandardowego motywu: index dodano cztery foldery plików.php, style.css, header.php i stopka.php. Następny plik, który powinieneś utworzyć, nazywa się functions.php, który dodaje osobowości do WordPressa, ponieważ jego wiersz poleceń może modyfikować domyślne zachowanie CMS., Ma następujące cechy:
- nie wymaga unikalnego tekstu nagłówka;
- działa tylko wtedy, gdy znajduje się w aktywowanym katalogu motywu;
- stosuje się tylko do bieżącego motywu;
ten kod będzie zawierał lub aktywował arkusz stylów dla Twojego niestandardowego motywu:
jakie narzędzia mogą pomóc stworzyć motyw WordPress?
wszystko gotowe! Twój motyw został stworzony i działa poprawnie z linkami, które kierują użytkownika do ekskluzywnej strony dla każdego posta., Ponadto dodałeś już nagłówek, stopkę i arkusz stylów dla niestandardowego motywu.
jednak nadal musisz dodać inne wymagania do swojej strony, aby szablon miał unikalne cechy. Wiele osób uważa, że funkcjonalność motywu jest wyłącznie estetyczna, ale ma również ogromny wpływ na wydajność witryny.
aby wykonać te modyfikacje, konieczne jest użycie hooków — fragmentów kodu umieszczonych w plikach szablonów, takich jak index.php lub funkcje.,php -, które pozwalają na wykonywanie działań PHP w różnych obszarach witryny, dodawanie stylów i wyświetlanie innych informacji.
Większość hooków jest zaimplementowana bezpośrednio w rdzeniu WordPressa, ale niektóre są również przydatne dla twórców motywów. Hook „after_setup_theme”, na przykład, aktywuje podświetlone obrazy (miniatury) dla każdego posta, dodaje logo dla strony internetowej i menu w nagłówku.php i stopka.php. Istnieją również inne Hooki, jak opisano poniżej:
- wp_head – dodany do elementu<head> element w nagłówku.,php, włącza style, skrypty i inne informacje, które są wykonywane zaraz po załadowaniu strony;
- wp_footer-dodane do stopki.php tuż przed znacznikiem </body>, dzięki czemu można dodać informacje Google Analytics, na przykład;
- wp_meta – zawarte na pasku bocznym.php, aby dodać Skrypty, takie jak chmura tagów;
- comment_form-dodawane do komentarzy.php przed </div> (zamknięcie znacznika pliku), aby wyświetlić komentarze strony.,
w tym samouczku nauczyłeś się podstaw tworzenia motywu WordPress. Ponieważ projekt strony jest również ważny, szczególnie dla aplikacji korporacyjnych, możesz dodać linie gotowych kodów szablonów w Bootstrap, co może ułatwić proces dodawania nowych funkcji i funkcjonalności do twojej strony.
a teraz, gdy wiesz, jak opracować własny motyw WordPress, co powiesz na zdobycie wiedzy na temat tworzenia korporacyjnego bloga dla swojej firmy? Pobierz nasz darmowy ebook!,
