Szukasz ściągawki z motywów WordPress, aby szybko zmodyfikować twój motyw lub stworzyć nowy własny konfigurator? WordPress zawiera wiele wbudowanych tagów szablonów, których można użyć, aby uzyskać przewagę. W tym artykule podzielimy się ściągawką z motywów WordPress dla początkujących.
Przed rozpoczęciem
WordPress jest wyposażony w potężny silnik szablonów, który umożliwia twórcom motywów tworzenie 111111 pięknych projektów dla witryn internetowych opartych na WordPress. Istnieją zarówno płatne, jak i bezpłatne motywy WordPress, które możesz zainstalować na swojej witrynie internetowej.
Każdy motyw WordPress zawiera szereg opcji konfiguratora. Opcje te pozwalają zmieniać kolory, dodawać obrazki nagłówków, konfigurować menu nawigacyjne i nie tylko.
Jednak nadal jesteś ograniczony do funkcji, które obsługuje twój motyw. Czasami możesz chcieć wprowadzić niewielkie zmiany w twoim motywie WordPress, które wymagają kodowania. Aby to zrobić, będziesz musiał znać podstawy PHP, HTML i CSS.
Pierwszą rzeczą, którą powinieneś zrobić, jest zapoznanie się z tym, jak WordPress działa za kulisami i szablonami motywów WordPress.
Następnie warto zapoznać się z kilkoma najlepszymi praktykami. Na przykład utworzenie motywu potomnego zamiast wprowadzania zmian bezpośrednio w plikach twojego motywu.
Możesz również poćwiczyć na twoim motywie, instalując WordPressa na swoim komputerze.
Biorąc to pod uwagę, przejdźmy do naszej ściągawki z motywów 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 zazwyczaj zawierają wiele innych plików.
Poniżej znajduje się lista podstawowych plików, które posiada każdy motyw:
- style.css
- header.php
- index.php
- panel boczny.php
- footer.php
- single.php
- page.php
- comments.php
- 404.php
- functions.php
- archive.php
- searchform.php
- search.php
Jeśli tworzysz swój własny motyw, możesz zacząć od jednego z motywów startowych WordPress. Motywy te 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 mogą być używane do wyświetlania różnych rzeczy w twoim motywie. Funkcje te nazywane są tagami szablonów.
Pierwsza i prawdopodobnie najważniejsza funkcja, która jest wymagana we wszystkich standardowych motywach WordPress, nazywa się wp_head i wygląda następująco:
<?php wp_head(); ?>
.
Ten kod pobiera cały ważny kod HTML, który WordPress musi dodać w sekcji <head> każdej strony w twojej witrynie internetowej. Jest on również niezbędny do prawidłowego działania wielu wtyczek WordPress na twojej witrynie internetowej.
Poniżej znajduje się lista tagów szablonów, które często można znaleźć i używać w pliku header.php twojego motywu. Mogą one jednak być również używane w innych miejscach twojego motywu, gdy ich potrzebujesz.
// Title of the Blog, or Blog Name
<?php bloginfo('name'); ?>
// Title of a Specific Page
<?php wp_title(); ?>
// Exact URL for the site
<?php bloginfo('url'); ?>
// Site's Description
<?php bloginfo('description'); ?>
// Location of Site’s Theme File
<?php bloginfo('template_url'); ?>
// Link to the Style.css location
<?php bloginfo('stylesheet_url'); ?>
// RSS Feed URL for the site
<?php bloginfo('rss2_url'); ?>
// Pingback URL for the site
<?php bloginfo('pingback_url'); ?>
// WordPress version number
<?php bloginfo('version'); ?>
.
Tagi szablonów używane w innych plikach motywu
Przyjrzyjmy się teraz innym często używanym tagom szablonów i ich działaniu.
Poniższe tagi szablonów są używane do wywoływania i dołączania innych szablonów. Na przykład plik index.php twojego motywu użyje ich do dołączenia szablonów nagłówka, stopki, treści, komentarzy i panelu bocznego.
//Displays Header.php file content <?php get_header(); ?> // Displays Footer.php file content <?php get_footer(); ?> // Displays Sidebar.php file content <?php get_sidebar(); ?> // Displays Comment.php file content <?php comments_template(); ?>
.
Poniższe tagi szablonów są używane wewnątrz pętli WordPress do wyświetlania treści, zajawek i metadanych z twoich wpisów.
// Displays the Content of the Post
<?php the_content(); ?>
// Displays the excerpt that is used in Posts
<?php the_excerpt(); ?>
// Title of the Specific Post
<?php the_title(); ?>
// Link of the Specific Post
<?php the_permalink() ?>
// Category of a Specific Post
<?php the_category(', ') ?>
// Author of the Specific Post
<?php the_author(); ?>
//ID of a Specific Post
<?php the_ID(); ?>
// Edit link for a Post
// Oonly visible to logged in users with editing privileges
<?php edit_post_link(); ?>
// URL of the next page
<?php next_post_link(' %link ') ?>
// URL of the previous page
<?php previous_post_link('%link') ?>
.
Motywy WordPress są dostarczane z obszarami gotowymi na widżety, zwanymi panelami bocznymi. Są to lokalizacje w plikach twojego motywu, 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.
Najczęściej jednak te obszary widżetów znajdują się w prawym lub lewym panelu bocznym układu motywu. Aby dowiedzieć się więcej, zapoznaj się z naszym przewodnikiem na temat dodawania dynamicznych paneli bocznych gotowych na widżety w twoim motywie WordPress.
Oto kod używany do wyświetlania panelu bocznego w twoim motywie.
<?php
if ( ! is_active_sidebar( 'sidebar-1' ) ) {
return;
}
?>
<aside id="secondary" class="widget-area" role="complementary">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside><!-- #secondary -->
.
Musisz zastąpić sidebar-1 nazwą zdefiniowaną przez twój motyw dla tego konkretnego obszaru gotowego na widżet lub panelu bocznego.
Tagi szablonu do wyświetlania menu nawigacji
WordPress jest wyposażony w potężny system zarządzania menu, który umożliwia użytkownikom tworzenie menu nawigacyjnych dla ich witryny internetowej. Motyw WordPress może mieć więcej niż jedno położenie menu nawigacji.
Zobacz nasz przewodnik na temat tworzenia własnych menu nawigacyjnych 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' ) );
?>
.
Położenie motywu zależy od nazwy użytej przez twój motyw do zarejestrowania menu nawigacji. Klasa kontenera CSS może mieć dowolną nazwę. Będzie ona otaczać twoje menu nawigacyjne, dzięki czemu będziesz mógł je odpowiednio stylizować.
Różne tagi szablonu
Poniżej znajduje się kilka tagów, które będą powszechnie używane w twoim motywie WordPress.
// Displays the date current post was written
<?php echo get_the_date(); ?>
// Displays the last time a post was modified
get_the_modified_time
// Displays the last modified time for a post
<?php echo the_modified_time('F d, Y'); ?>
// Displays post thumbnail or featured image
<?php the_post_thumbnail( ); ?>
// Displays monthly archives
<?php wp_get_archives( ); ?>
// Displays the list of categories
<?php wp_list_categories(); ?>
// Displays the gravatar of a user from email address
// 32 pixels is the size, you can change that if you need
<?php echo get_avatar( 'email@example.com', 32 ); ?>
// Displays gravatar of the current post's author
<?php echo get_avatar( get_the_author_meta( 'ID' ), 32 ); ?>
.
Tagi warunkowe w motywach WordPress
Tagi warunkowe to funkcje, które zwracają wyniki w postaci True lub False. Te tagi warunkowe mogą być używane w całym twoim motywie lub wtyczce, aby sprawdzić, czy spełnione są określone warunki, a następnie wykonać odpowiednie czynności.
Na przykład, czy obecny wpis ma wyróżniający się obrazek, czy nie. Jeśli nie ma wyróżnionego obrazka, możesz zamiast tego wyświetlić domyślny wyróżniający się obrazek.
<?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 tagów warunkowych, których można użyć.
// Checks if a single post is being displayed is_single() // Checks if a page is being displayed is_page() // Checks if the main blog page is displayed is_home() // Checks if a static front page is displayed is_front_page() // Checks if current viewer is logged in is_user_logged_in()
.
Istnieje wiele innych tagów warunkowych, których można użyć. Pełną listę tagów warunkowych można znaleźć na stronie WordPress codex poświęconej tagom warunkowym.
Pętla WordPress
Pętla lub pętla WordPress to kod używany do pobierania i wyświetlania wpisów w WordPress. Wiele tagów szablonu WordPress może działać tylko wewnątrz pętli, ponieważ są one powiązane z wpisami lub obiektami typu post_type.
Poniżej znajduje się przykład prostej pętli WordPress.
<?php
// checks if there are any posts that match the query
if (have_posts()) :
// If there are posts matching the query then start the loop
while ( have_posts() ) : the_post();
// the code between the while loop will be repeated for each post
?>
<h2 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
<p class="date-author">Posted: <?php the_date(); ?> by <?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="Leave a comment">Comments</a></p>
<?php
// Stop the loop when all posts are displayed
endwhile;
// If no posts were found
else :
?>
<p>Sorry no posts matched your criteria.</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 podstawowa ściągawka z motywów WordPress dla początkujących. Możesz również zapoznać się z naszą listą najbardziej przydatnych sztuczek dla pliku funkcji WordPress.
Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube, aby zobaczyć poradniki dotyczące filmów WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Marco says
This is great article.
But is it still relevant in 2022 with Gutenberg block editor?
WPBeginner your the best!
WPBeginner Support says
What we share in this article is still currently relevant.
Administrator
Henry Obilor says
I would love to ask when creating a new theme. Can I create my own header.php and use a premium theme footer.php?
Mixing yours with already built template. Will it work?
WPBeginner Support says
That would heavily depend on the content of the footer.php and how you have your theme coded. If you have the footer then the best method would be to test on a local installation.
Administrator
Biplob says
It’s awesome thing. it’s very useful
Zaki says
This is certainly not for beginners. I am afraid I will end up with messing up my website. Coding part is completely unclear. I would appreciate if you can some great screenshots to illustrate „How to add a custom page”.
Sanam says
Bro where to paste that code in functions.php
WPBeginner Support says
At the bottom. If you have ?> tag as the last line then you need to paste code before that line.
Administrator
Shahbaz Ahmed Bhatti says
Very Nice and Goooood Work Keep it up, Very goood information for Basic
Solomon says
Thanks very much, i really appreciate.
Pali Madra says
Thanks for the great tutorial. I recommend the tutorial to anyone trying to learn WordPress.
Keep up the good work!
Ben says
Thanks for a very helpful article. Just want I have been looking for.
Thanks.
Ben
madalinignisca says
what is – Site’s Description
I think it is
madalinignisca says
what is „<?php bloginfo(%u2019description%u2019); ?> – Site’s Description” ? I think it is „<?php bloginfo(’description’); ?>”
mirzayasir4 says
That’s great useful cheet sheet when you are doing editing in themes. Thanks
John says
Fantastic, I’ve been looking for an easy WordPress cheatsheet for a while, thanks for doing this, makes life a lot easier and I can get a bit more creative. WordPress has such a lot of power under the hood.
mark says
this is gr8 for beginner
Russell Poulter says
This is SO bookmarked!
Thanks.
asif eminov says
Thanks this details.
Ersatzknochen says
Yeah, very useful. Thank you.
Delighted says
Thank you for the Codes in Header.php part, Very easy to understand and VERY useful! thank you for this.
SleepY says
Wow….thats what i was looking for since days.
thanks a lot !
Victor Duwon Jackson says
This is great, Thanks.
Manoj says
Great info! bookmarked
Obed Ward says
Excellent WP theme cheat sheet, going to bookmark it (and of course tweet it). Thanks!
Naeem Noor says
Very Useful, just printed it.
Blog2Life says
These shortcodes are just what I was looking for to start work on some new themes.. thanks for the post and keep up the good work!
Hami says
Yes exactly. This post has solved out and let us (beginners) start working instantly on new ideas
A.D.K. says
This is very useful thanks.
Jon Rawlins says
Retweeted this for you. Just about to get a blog setup for myself, so this site has been very useful.
Angad Sodhi says
Aah! Bookmarking this right away..
Referring the default theme for these small details is now history!
Thank you people.
DaveK says
Cool, Thanks for sharing, consider it tweeted