Dostosowywanie szablonów stron w WordPress – lekcja 23

przez Nikołajenko Maksym · Opublikowany Styczeń 11, 2015 · Zaktualizowano Sierpień 27, 2020

Szablony stron w WordPress są bardzo łatwe do dodania., jeśli potrzebujesz stylizować szablon dla wszystkich stron, następnie możesz utworzyć plik page.php w katalogu głównym motywu. Stwórzmy plik i umieśćmy tam kod z pliku single.php. Utworzono szablon, następnie możesz usunąć i dodać coś własnego (nowe elementy wystroju, dodatkowe paski boczne, menu …).

To, co się stało można zobaczyć na przykładzie dowolnej utworzonej wcześniej strony, kliknąłem na stronę portfolio i tak to teraz wygląda.

wordpress create page themplate

O stronie portfolio porozmawiamy później., a teraz spróbujmy zrobić szablony dla poszczególnych stron, te, które możemy następnie wybrać w panelu administracyjnym.

Jeśli potrzebujemy zrobić szablon na osobną stronę, wtedy możesz użyć specjalnego komentarza. Ten komentarz jest tagiem dla wordpress, który wskazuje, że plik jest dowolnym wzorcem.

<?php
/*
Template Name: example
*/
?>

<?php

Template Name: example

Spróbujmy zacząć tworzyć nasze szablony stron w kolejności.

W katalogu głównym motywu znajduje się plik o nazwie onecolumn.html, zmień jego nazwę na tmp-onecolumn.php, przedrostek tmp dodajemy, aby w przyszłości nie pomylić się, gdzie są szablony stron, gdzie są inne pliki?. Po zmianie nazwy pliku, dodaj taki komentarz na górze szablonu:

<?php
/*
Template Name: One column
*/
?>

<?php

Template Name: One column

Wordpress utwórz pierwszy szablon - Kursy Wordpressa

Przejdźmy przez kroki znane już z poprzednich lekcji i zamieńmy górną i dolną część kodu, dołączyć nagłówek do pliku szablonu, stopka, góra i dół szablonu.

Wordpress utwórz górny obszar - Kursy Wordpressa

utwórz dolną część szablonu - kursy wordpressa

Aby szablon zaczął działać, musimy określić, dla której strony ma on zostać zastosowany.. Przejdź do panelu administracyjnego -> Strony -> o, wybierz nowy szablon i odśwież stronę.

Wybór szablonu na stronie wordpress

Możesz zobaczyć, jak wygląda strona w obecnej formie, ale jeszcze nie wyświetla danych, wyświetla tylko zawartość szablonu tmp-onecolumn.php. Zaznaczmy razem, co i gdzie będziemy wyświetlać w szablonie.

Wymiana treści tagu <Sekcja> do kodu, który już wykorzystaliśmy w szablonie page.php, mianowicie ten:

								<!-- Main Content -->
								<?php if ( have_posts() ) { 
									while ( have_posts() ) : the_post();
									?> 
									<section class="is-post is-post-excerpt" <?php post_class(); ?> id="post-<?php the_ID(); ?>">
										<header>
											<h2 class="entry-title"><a title="<?php echo the_title_attribute( 'echo=0' ); ?>" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2><br />
											<span class="date">
												<span class="month"><?php the_time('M'); ?></span>
												<span class="day"><?php the_time('j'); ?></span>
												<span class="year"><?php the_time('Y'); ?></span>
											</span>
										</header>
										<div class="thumb">
											<a href="<?php the_permalink(); ?>" class="image image-full">
												<?php if ( has_post_thumbnail() ) {
													the_post_thumbnail();
												}  ?>
											</a>
										</div>
										<?php the_content(); ?>
										<br clear="all">
									</section> 
									<div id="single-nav" class="clearfix"> 
										<div class="prev"><?php next_post_link('%link', '<span>%title</span>', false); ?></div>
										<div class="next"><?php previous_post_link('%link', '<span>%title</span>', false); ?></div>
										<div class="prev-responsive"><?php next_post_link('%link', '<span>Previous</span>', false); ?></div>
										<div class="next-responsive"><?php previous_post_link('%link', '<span>Next</span>', false); ?></div>
									</div>
									<!-- /single-nav -->
									<?php endwhile; ?>
								<?php } ?>

<?php if ( have_posts() ) {

while ( have_posts() ) : the_post();

</span>

</header>

<a href="<?php the_permalink(); ?>" class="image image-full">

<?php if ( has_post_thumbnail() ) {

the_post_thumbnail();

} ?>

</a>

</div>

<?php the_content(); ?>

</section>

<div class="prev"><?php next_post_link('%link', '<span>%title</span>', false); ?></div>

<div class="next"><?php previous_post_link('%link', '<span>%title</span>', false); ?></div>

<div class="prev-responsive"><?php next_post_link('%link', '<span>Previous</span>', false); ?></div>

<div class="next-responsive"><?php previous_post_link('%link', '<span>Next</span>', false); ?></div>

</div>

<?php endwhile; ?>

<?php } ?>

Ponadto, jeśli spojrzymy na wynik materiału, zobaczymy, że tekst na stronie jest przesunięty w prawo, chociaż nie wstawiliśmy jeszcze miniatury, ten punkt musi zostać naprawiony wszędzie tam, gdzie użyliśmy wyjścia miniatury.

Miniatura wyjścia mojego kodeka wideo

Zmieńmy ten kod:

										<div class="thumb">
											<a href="<?php the_permalink(); ?>" class="image image-full">
												<?php if ( has_post_thumbnail() ) {
													the_post_thumbnail();
												}  ?>
											</a>
										</div>

<a href="<?php the_permalink(); ?>" class="image image-full">

<?php if ( has_post_thumbnail() ) {

the_post_thumbnail();

} ?>

</a>

</div>

Na tej:

										<?php if ( has_post_thumbnail() ) { ?>
										<div class="thumb">
											<a href="<?php the_permalink(); ?>" class="image image-full">
													<?php the_post_thumbnail(); ?>
											</a>
										</div>
										<? }  ?>

<?php if ( has_post_thumbnail() ) { ?>

<a href="<?php the_permalink(); ?>" class="image image-full">

<?php the_post_thumbnail(); ?>

</a>

</div>

<? } ?>

Przed zmianą kodu.

Strona wordpress bez zdjęć

Po zmianie kodu.

Tak myślę, z powyższych zdjęć jest jasne, o jakiej poprawce mówiłeś?. Napraw także wyjście miniatur w plikach archive.php, single.php i page.php samodzielnie.

Powodzenia w rozwoju serwisu, pozostajemy w kontakcie, Powiem ci dużo więcej. W następnej lekcji opowiem, jak wyświetlić sekcję bloga na osobnej stronie.

Źródła bieżącej lekcji

Usługi korepetycji online. Lista kursów, które prowadzę

Podstawowy kurs projektowania stron internetowych;
Układ stron;
Ogólny kurs CMS WordPress oraz kontynuacja kursu dotyczącego tworzenia szablonów;
Tworzenie stron internetowych w PHP.

Czytaj więcej na stronie Nauczyciel WordPressa