WordPress Theme Cheat Sheet dla początkujących

Szukasz ściągawki motywu WordPress, aby szybko zmodyfikować swój motyw lub utworzyć nowy niestandardowy motyw? WordPress zawiera wiele wbudowanych tagów szablonów, których możesz użyć, aby uzyskać przewagę. W tym artykule udostępnimy ściągawkę motywu WordPress dla początkujących.

Zanim Zaczniesz

WordPress jest wyposażony w potężny silnik szablonów, który pozwala programistom motywów tworzyć piękne projekty dla stron internetowych opartych na WordPress. Istnieją zarówno premium, jak i darmowe motywy WordPress, które możesz zainstalować na swojej stronie.

Każdy motyw WordPress zawiera wiele opcji dostosowywania. Opcje te pozwalają zmieniać kolory, dodawać obrazy nagłówka, konfigurować menu nawigacyjne i nie tylko.

Nadal jednak ograniczasz się do funkcji, które obsługuje Twój motyw. Czasami możesz chcieć wprowadzić niewielkie zmiany w swoim szablonie WordPress, które wymagają trochę kodowania. Aby to zrobić, musisz znać podstawowe PHP, HTML i CSS.

Pierwszą rzeczą, którą chcesz zrobić, to zapoznać się z tym, jak WordPress działa za kulisami i szablonami motywów WordPress.

Następnie istnieje kilka najlepszych praktyk, które możesz chcieć zastosować. Na przykład tworzenie motywu podrzędnego zamiast wprowadzania zmian bezpośrednio do plików motywu.

Możesz także ćwiczyć na swoim motywie, instalując WordPress na swoim komputerze.

Mając to na uwadze, zagłębimy się w naszą ściągawkę motywu WordPress dla początkujących.

Podstawowe Szablony Motywów WordPress

Każdy motyw WordPress składa się z różnych plików zwanych szablonami. Wszystkie motywy WordPress muszą mieć arkusz stylów i plik indeksu, ale zwykle wymyślają wiele innych plików.

Poniżej znajduje się lista podstawowych plików, które każdy motyw ma:

• styl.css
• nagłówek.php
• indeks.php
• pasek boczny.php
• stopka.php
• singiel.php
• strona.php
• komentarze.php
• 404.php
• funkcje.php
• archiwum.php
• formularz wyszukiwania.php
• Szukaj.php

Jeśli budujesz własny motyw, możesz zacząć od jednego z motywów startowych WordPress. Te motywy są dostarczane z gotowymi do użycia plikami szablonów WordPress i CSS, które zapewniają ramy do budowania.

Tagi szablonu w nagłówku

WordPress zawiera wiele przydatnych funkcji, które można wykorzystać do wyświetlania różnych rzeczy w całym motywie. Funkcje te nazywane są znacznikami szablonów.

Pierwsza i prawdopodobnie najważniejsza funkcja, która jest wymagana we wszystkich standardowych zgodnych motywach WordPress, nazywa się wp_head i wygląda tak:

<?php wp_head(); ?>

Ten kod pobiera wszystkie ważne HTML WordPress musi dodać w < head> sekcji każdej strony na twojej stronie. Ważne jest również, aby wiele wtyczek WordPress działało poprawnie na twojej stronie.

Poniżej znajduje się lista znaczników szablonów, które często znajdziesz i użyjesz W nagłówku szablonu.plik php. Jednak mogą być również używane w innym miejscu na temat, gdy ich potrzebujesz.

// Tytuł bloga lub nazwa bloga
<?PHP bloginfo ('nazwa');?> 

// Tytuł konkretnej strony
<?php wp_title(); ?>

// Dokładny adres URL strony
<?PHP bloginfo ('url');?> 

// Opis strony
<?PHP bloginfo ('description');?> 

// Lokalizacja pliku motywu strony
<?PHP bloginfo ('template_url');?>

// Link do stylu.lokalizacja css
<?PHP bloginfo ('stylesheet_url');?>  

// RSS Feed URL dla strony
<?PHP bloginfo ('rss2_url');?> 

// Pingback URL strony
<?PHP bloginfo ('pingback_url');?>

// Numer wersji WordPress 
<?PHP bloginfo ('version');?> 

Tagi szablonu używane w innych plikach motywów

Teraz rzućmy okiem na inne powszechnie używane tagi szablonów i ich działanie.

Następujące znaczniki szablonów są używane do wywoływania i dołączania innych szablonów. Na przykład indeks Twojego motywu.plik php użyje ich do dołączenia nagłówka, stopki, Treści, komentarzy i szablonów paska bocznego.

// Wyświetla Nagłówek.zawartość pliku php
<?php get_header ();?> 

// Wyświetla Stopkę.zawartość pliku php
<?php get_footer(); ?>

// Wyświetla Pasek Boczny.zawartość pliku php
<?php get_sidebar ();?>

// Wyświetla Komentarz.zawartość pliku php
<?PHP comments_template(); ?> 

Następujące tagi szablonów są używane w pętli WordPress do wyświetlania treści, fragmentów i metadanych z Twoich postów.

// Wyświetla treść postu
<?php the_content ();?>  

// Wyświetla fragment, który jest używany w postach
<?php the_excerpt(); ?>

// Tytuł konkretnego postu
<?php the_title(); ?>

// Link do konkretnego posta
<?php the_permalink ()?>

// Kategoria konkretnego posta
<?php the_category(', ') ?>

// Autor konkretnego postu
<?php the_author ();?> 

// ID konkretnego posta
<?php the_ID ();?>

// Edytuj link do posta 
// Tylko widoczne dla zalogowanych użytkowników z uprawnieniami do edycji
<?PHP edit_post_link(); ?>

// URL następnej strony
<?php next_post_link(' %link ') ?>

// URL poprzedniej strony
<?PHP previous_post_link ('%link')?> 

Motywy WordPress pochodzą z obszarów gotowych do widżetów zwanych paskami bocznymi. Są to lokalizacje w plikach motywów, w których użytkownicy mogą przeciągać i upuszczać widżety WordPress. Często motyw ma wiele lokalizacji, w których użytkownicy mogą dodawać widżety.

Jednak najczęściej te obszary widżetów znajdują się na prawym lub lewym pasku bocznym układu motywu. Aby dowiedzieć się więcej, Zobacz nasz przewodnik, Jak dodać dynamiczne paski boczne gotowe do widżetów w swoim motywie WordPress.

Oto kod używany do wyświetlania paska bocznego w Twoim motywie.

<?php 
jeśli ( ! is_active_sidebar ('sidebar-1')) {
	return;
}
?>

< a href="secondary" class = "widget-area" role = "complementary">
	<?php dynamic_sidebar ('sidebar-1');?>
< / a><!-- #drugorzędne -->

Będziesz musiał zastąpić pasek boczny – 1 nazwą zdefiniowaną przez Twój motyw dla tego konkretnego obszaru gotowego do widżetu lub paska bocznego.

Tagi szablonu do wyświetlania menu nawigacji

WordPress jest wyposażony w potężny system zarządzania menu, który pozwala użytkownikom tworzyć menu nawigacyjne dla swojej witryny. Motyw WordPress może mieć więcej niż jedną lokalizację menu nawigacyjnego.

Zobacz nasz przewodnik, jak tworzyć własne niestandardowe menu nawigacyjne w motywie WordPress.

Poniżej znajduje się kod, który będzie używany w Twoim motywie do wyświetlania menu nawigacyjnego.

<?php
wp_nav_menu (array( 
    'theme_location' = > 'my-custom-menu', 
    'container_class' = > 'custom-menu-class')); 
?>

Lokalizacja motywu zależy od nazwy motywu użytego do rejestracji menu nawigacyjnego. Klasę kontenera CSS można nazwać dowolnie. Otoczy twoje menu nawigacyjne, dzięki czemu możesz je odpowiednio stylować.

Różne Tagi Szablonów

Oto niektóre z tagów, które będziesz powszechnie używać w całym swoim szablonie WordPress.

// Wyświetla datę napisania bieżącego postu
<?PHP echo get_the_date ();?> 

// Wyświetla ostatni raz post był modyfikowany
get_the_modified_time

// Wyświetla czas ostatniej modyfikacji posta
<?PHP echo the_modified_time ('F d, Y');?>

// Wyświetla miniaturę posta lub polecany obraz
<?php the_post_thumbnail( ); ?>

// Wyświetla Miesięczne archiwum
<?php wp_get_archives ();?>

// Wyświetla listę kategorii
<?php wp_list_categories(); ?>

// Wyświetla gravatar użytkownika z adresu e-mail
// 32 piksele to rozmiar, możesz go zmienić, jeśli potrzebujesz
<?PHP echo get_avatar ("email@example.com", 32);?>

// Wyświetla gravatar autora aktualnego postu
<?PHP echo get_avatar (get_the_author_meta ('ID'), 32);?>

Tagi warunkowe w WordPress Themes

Znaczniki warunkowe są funkcjami, które zwracają wyniki w True lub False. Te tagi warunkowe mogą być używane w całym motywie lub wtyczce, aby sprawdzić, czy spełnione są określone warunki, a następnie zrobić coś odpowiednio.

Na przykład, Jeśli bieżący post ma polecany obraz, czy nie. Jeśli nie ma polecanego obrazu, możesz zamiast tego pokazać domyślny wyróżniony obraz.

<?php
if (has_post_thumbnail() ) {
    the_post_thumbnail();
}
else {
    echo ' < img src="' get_bloginfo ('stylesheet_directory' ) 
        . '/images / thumbnail-default.jpg"/>";
}
?>

Poniżej znajduje się kilka innych znaczników warunkowych, których możesz użyć.

// Sprawdza, czy wyświetlany jest pojedynczy post
is_single() 

// Sprawdza czy strona jest wyświetlana
is_page() 

// Sprawdza, czy strona główna bloga jest wyświetlana
is_home() 

// Sprawdza czy wyświetlana jest statyczna strona główna
is_front_page() 

// Sprawdza czy aktualna przeglądarka jest zalogowana
is_user_logged_in() 

Istnieje wiele innych tagów warunkowych, których możesz użyć. Pełna lista znaczników warunkowych znajduje się na stronie Kodeksu WordPress o znacznikach warunkowych.

Pętla WordPress

Pętla lub pętla WordPress to kod używany do pobierania i wyświetlania postów w WordPress. Wiele znaczników szablonów WordPress może działać tylko wewnątrz pętli, ponieważ są one powiązane z obiektami post lub post_type.

Poniżej znajduje się przykład prostej pętli WordPress.

<?php
 
// sprawdza czy są jakieś posty pasujące do zapytania
if (have_posts()) :
 
  // Jeśli są posty pasujące do zapytania to Uruchom pętlę
  while ( have_posts() ) : the_post();
 
    // kod pomiędzy pętlą while będzie powtarzany dla każdego posta
    ?>
 
    <H2 id = " post -<?php the_ID ();?> "><a href="<?php the_permalink ()?> "rel= "bookmark"title=" Stały Link do<?php the_title(); ?>"><?php the_title(); ?>< / a > < / H2>
 
    < p class="date-author">Posted:<?php the_date ();?> przez <?php the_author ();?>< / p>
 
    <?php the_content ();?>
 
    < p class="postmetadata">Filed in:<?php the_category(); ?> / Tagged:<?php the_tags(); ?> / <a href="<?PHP comments_link ();?> "title = "Dodaj komentarz" >komentarze</a></p>
 
    <?php
 
    // Zatrzymaj pętlę, gdy wyświetlane są wszystkie posty
 endwhile;
 
// If no posts were found
else :
?>
< p>Niestety brak postów spełniających Twoje kryteria .< / p>
<?php
endif;
?>

Aby dowiedzieć się więcej o pętli sprawdź co to jest pętla w WordPress (Infografika).

Mamy nadzieję, że ten artykuł pomoże ci jako podstawowy WordPress theme cheat sheet dla początkujących. Możesz również zobaczyć naszą listę najbardziej przydatnych sztuczek dla pliku funkcji WordPress.

Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.