Jak podpiąć HTML / CSS do WordPressa?

wordpress website laptop hands

Kończąc pracę nad stroną statyczną mierzymy się z wyzwaniem podpięcia jej do CMSa aby klient/użytkownik mógł samodzielnie uzupełniać treści. W przypadku WordPressa (WP) do zrobienia tego potrzebna nam będzie znajomość kilku podstawowych funkcji WP (PHP) oraz podstawy znajomości taksonomii tego cmsa.

Pierwszą rzeczą którą musimy zrobić to stworzenie pliku style.css który umieścimy w głównym katalogu naszej strony (tam gdzie znajduje się index.html). Plik ten pozwoli WordPressowi na rozpoznanie naszego katalogu ze stroną jako motywu kompatybilnego w WP. Uwaga! Jeżeli twój plik styli również znajduje się w katalogu głównym, stwórz dla niego folder css i umieść go w nim (podobnie należy postępować w przypadku skryptów), takie podejście pozwoli uniknąć konfliktu nazw oraz ułatwi ewentualne debuggowanie. Pamiętaj tylko by później zmodyfikować odpowiednio ścieżkę do pliku umieszczoną w headerze.

Kod tego pliku powinien mieć następującą postać:

/*
Theme Name: Tapir Interactive - Blog
Author: Tapir Interactive
Author URI: http://tapir-interactive.com/
Version: 1.1
Text Domain: tapir-interactive
*/

Oczywiście podmieniamy treść wpisów na własne.

Kolejnym etapem będzie otworzenie naszego pliku index.html i oddzielenie całej początkowej części pliku aż do miejsca w którym poszczególne podstrony zaczynają się od siebie różnić. Zazwyczaj kopiujemy cały tag <head> oraz menu. Następnie skopiowany kod wklejamy do nowego pliku który nazywamy header.php. Przykładowa postać kodu w pliku:

<!DOCTYPE html>
<html lang="<?php language_attributes(); ?>">
<head>
<?php wp_head(); ?>
<meta charset="UTF-8">
<title><?php bloginfo('name'); ?> | <?php bloginfo('description'); ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="robots" CONTENT="index, follow">
<meta name="description" content="<?php bloginfo('description'); ?>">
<meta property="og:image" content="<?php echo get_template_directory_uri(); ?>/images/tapir-footer.png">
<link href="<?php echo get_template_directory_uri(); ?>/favicon.png" type="image/png" rel="icon">
<link href="<?php echo get_template_directory_uri(); ?>/css/hamburgers.min.css" rel="stylesheet">
<link href="<?php echo get_template_directory_uri(); ?>/css/style.css" rel="stylesheet" type="text/css" >
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.min.js"></script>
</head>
<body>
<nav id="nav">
<ul class="menu">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</nav>

W powyższym kodzie widzimy wstawione już tagi php. Aby nasz motyw w pełni współpracował z WordPressem musimy uzupełnić część atrybutów w tagach wartościami zaciąganymi z bazy danych WP. Skupmy się na najważniejszej funkcji:

<?php echo get_template_directory_uri(); ?>

Ta funkcja w połączeniu z funkcją echo drukuje nam dokładny adres katalogu naszego motywu. Dzięki temu jeśli zmienimy adres strony nie będzie trzeba zmieniać wszystkich linków.

Kolejnym krokiem jest zastąpienie wyciętego przez nas kodu (w pliku index.html) funkcją:

<?php get_header(); ?>

Domyślnie przywołuje ona kod zawarty w pliku header.php. Uwaga! Żeby ta funkcja zadziałała musimy zmienić rozszerzenie naszego pliku index na php.

Analogiczne kroki wykonujemy dla części pliku index która będzie stopką na wszystkich stronach (zazwyczaj obejmuje ona widgety, menu w stopce, mapki dojazdu (na stronach onepage) itp.

Przyjmijmy że kod powinien wyglądać podobnie do tego:

 <footer>
<div class="container">
<div class="oneofthree first">
<h1>Projektowanie stron internetowych we Wrocławiu</h1>
<h1>Projekty logo i grafiki webowej Wrocław</h1>
</div>
<div class="oneofthree second">
<p>Tapir Interactive 2018</p>
</div>
<div class="oneofthree last">
<p>Dbamy o twoją prywatność,<br>
ta strona nie używa plików cookies</p>
</div>
</div>
</footer>
<script src="<?php echo get_template_directory_uri(); ?>/js/scripts.js"></script>
<?php wp_footer(); ?>
</body>
</html>

Również ten fragment kodu musimy zastąpić odpowiednią funkcją w pliku index.php:

<?php get_footer(); ?>

Jeżeli nasza strona to onepage to właściwie zrobiliśmy już wszystko by stworzyć tzw. front page, jednak zobaczmy co jeszcze trzeba zrobić gdy mamy inne podstrony. Uwaga! Jeżeli planujecie oprócz front page także stronę z wpisami to polecam przemianowanie index.php na front-page.php i zmianę ustawień WordPressa na Strona główna wyświetla – statyczną stronę. Należy jednak pamiętać iż każdy motyw WP musi posiadać plik index.php gdyż jest to końcowy element do którego odwołuje się strona gdy brak jest szablonu dla konkretnej strony. Polecam zapoznać się z hierarchią szablonów WordPress’a aby wiedzieć jaki szablon wyświetli się na konkretnej stronie.

Dla każdej podstrony wykonujemy analogiczną akcję jak dla index. Dodatkowo jeżeli chcemy posiadać uniwersalny szablon strony to powinniśmy utworzyć plik page.php który uzupełnimy o  funkcje get_header(), get_footer() oraz pętlę php wyświetlającą treść strony.

Przykładowa pętla:

<?php
if ( have_posts() ) {
while ( have_posts() ) {
the_post(); ?>
<h1><?php the_title(); ?></h1>
<?php the_content(); ?>
<?php } // end while
} // end if
?>

W zasadzie to wszystko jeżeli chodzi o najprostsze podpięcie strony do WordPressa. W kolejnych częściach napiszę o podpinaniu dynamicznego menu oraz widgetach.

Wytłumaczenie pozostałych funkcji:

<?php language_attributes(); ?>

pobiera atrybuty językowe WordPressa

<?php wp_head(); ?>

drukuje wszystkie tagi wykorzystywane przez WordPressa oraz wtyczki, które mają być umieszczone w headerze.

<?php bloginfo('name'); ?><?php bloginfo('description'); ?>

drukuje informacje o blogu jako argument przyjmuję konkretną informację którą chcemy pokazać. Lista argumentów na https://developer.wordpress.org/reference/functions/bloginfo/

<?php wp_footer(); ?>

drukuje wszystkie tagi wykorzystywane przez WordPressa oraz wtyczki, które mają być umieszczone w stopce.