Wordpress – wÅ‚asny szablon w Twitter Bootstrap
Niniejszy mini-poradnik ma na celu pokazanie, w jaki sposób stworzyć wÅ‚asny motyw w WordPressie w oparciu o bardzo popularny framework CSS – Twitter Bootstrap. ZakÅ‚adam, że już masz przygotowany statyczny szablon napisany w HTML. Teraz skupimy siÄ™ na dostosowaniu go do systemu szablonów WordPress.
Struktura folderu roboczego
- img – katalog z obrazkami zawierajÄ…cy np. logo oraz inne obrazki np. tÅ‚a
- bootstrap – katalog z bibliotekÄ… Twitter Bootstrap
- font-awesome – katalog ze zbiorem ikonek Font Awesome
- js – katalog ze skryptami JS
- index.php – główny plik szablonu
- menu.php – menu nawigacyjne
- header.php – nagłówek
- footer.php – stopka
- functions.php – konfiguracja szablonu
- style.css – arkusz styli
- screenshot.png – zrzut ekranu szablonu. Pojawia siÄ™ w kokpicie przy personalizacji.
Nagłówek – header.php
Stwórz plik w katalogu roboczym pod nazwą header.php. Plik ten będzie zawierał deklarację HTML oraz sekcję HEAD. Przykładowy plik z uwzględnieniem będzie wyglądał następująco:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php if(is_front_page()) { echo get_bloginfo('name'); } else { trim(wp_title("")); } ?></title>
<?php wp_meta(); ?>
<link rel="shortcut icon" href="<?php bloginfo('template_url'); ?>/img/favicon.ico">
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link href="<?php bloginfo('template_url'); ?>/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="<?php bloginfo('template_url'); ?>/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="<?php echo get_stylesheet_uri(); ?>" rel="stylesheet">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<!--[if lt IE 9]>
<script src="<?php bloginfo('template_url'); ?>/js/html5shiv.js"></script>
<script src="<?php bloginfo('template_url'); ?>/js/respond.min.js"></script>
<script src="<?php bloginfo('template_url'); ?>/js/ie-bootstrap-carousel.min.js"></script>
<![endif]-->
<?php wp_head(); ?>
</head>
Meta tag title, w zależności od tego czy jesteśmy na podstronie czy na stronie głównej wyświetlamy nazwę witryny lub nazwę strony, Warto dodać bibliotekę html5shiv, dzięki której możemy używać tagi HTML5 dla IE8.
Należy odpowiednio ustawić ścieżki do bibliotek Bootstrap oraz FontAwesome.
Menu – menu.php
Teraz stworzymy plik z menu nawigacyjnym, oparty o Twitter Bootstrap. Zintegrujemy również obsÅ‚ugÄ™ Facebook’a oraz umieÅ›cimy obok logo Like button.
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/pl/all.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div id="top-menu" class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header logo">
<h1><a href="<?php echo home_url(); ?>"><img alt="logo" src="<?php bloginfo('template_url'); ?>/img/logo.png"></a></h1>
</div>
<div class="fb-like pull-left" data-href="<?php echo(FACEBOOK_URL); ?>" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
<div class="navbar-collapse collapse">
<div class="pull-right">
<ul class="language-switch"><?php pll_the_languages(array('show_flags'=>1, 'show_names'=>0, 'hide_if_empty' => 0));?></ul>
</div>
<?php wp_nav_menu(array('theme_location' => 'primary', 'container' => '', 'menu_class'=>'nav navbar-nav pull-right')); ?>
</div>
</div>
</div>
Na początku, zaraz za sekcją body wklejamy standardowy kod inicjalizujący Facebooka. Następnie tworzymy poziome menu nawigacyjne z logiem po lewej stronie. Like button będzie obok loga, możesz tu wpisać bezpośredni adres URL do swojego fanpage zamiast zmiennej FACEBOOK_URL lub też zainstalować wtyczkę Define Constants i ustawić wartość tej zmiennej, którą możesz wykorzystać tu w szablonie. Ja preferuję to drugie rozwiązanie. Następnie wyświetlamy menu o nazwie primary. Menu deklarujemy w pliku functions.php, natomiast strukturę należy sobie wyklikać w panelu administracyjnym WordPress (Wygląd -> Menu).
Functions.php
W pliku functions.php będą zawarte wszystkie akcje konfigurujące Twój szablon. Możesz w tym pliku zmienić domyślne zachowanie funkcji WordPress.
Na poczÄ…tku dodajmy deklaracjÄ™ menu nawigacyjnego. Bez tego nie pojawi siÄ™ ono w kokpicie WordPress.
register_nav_menus( array(
'primary' => __( 'Primary Navigation', 'theme-identifier' ),
) );
Następnie dołączmy niezbędne skrypty Bootstrap oraz jQuery. Nie zapomnij o sprawdzeniu poprawności ścieżek.
function wpt_register_js() {
if(!is_admin())
{
wp_deregister_script('jquery');
wp_register_script('jquery', get_template_directory_uri() . '/js/jquery-1.11.0.min.js', false, '1.11.0');
wp_enqueue_script('jquery');
}
wp_register_script('bootstrap', get_template_directory_uri() . '/bootstrap/js/bootstrap.min.js', 'jquery');
wp_enqueue_script('bootstrap');
}
add_action( 'init', 'wpt_register_js' );
Stopka – footer.php
W stopce dodamy linki do mediów społecznościowych oraz odnośnik do podstrony z kontaktem. Zamiast na sztywno wprowadzać linki do szablonu, polecam metodę pokazaną wcześniej tj. zdefiniowanie sobie stałych we wtyczce Define Constants. CONTACT_ID to numer ID podstrony kontakt. W małej stopce, możesz wyświetlić informacje o prawach autorskich oraz wyświetlić bieżącą datę.
<footer>
<div id="social">
<div class="container">
<a href="<?php echo GOOGLE_PLUS_URL; ?>" target="_blank"><span class="fa fa-google-plus-square"></span></a>
<a href="<?php echo FACEBOOK_URL; ?>" target="_blank"><span class="fa fa-facebook-square"></span></a>
<a href="<?php echo get_page_link(CONTACT_ID) ?>"><span class="fa fa-envelope-o"></span></a>
</div>
</div>
<div id="copy">
<div class="container">
&copy; <?php echo date('Y'); ?>
</div>
</div>
</footer>
<?php wp_footer(); ?>
Główny szablon – index.php
Plik szablonu po prostu scala nagłówek, menu oraz stopkę i wyświetla strony. Pamiętaj o ustawieniu Template Name w komentarzu. Możesz tworzyć wiele szablonów, różnych dla specyficznych podstron. Wystarczy ustawić ten parametr i podczas edycji strony w kokpicie, wybierzesz odpowiedni szablon.
<?php
/*
Template Name: Index template
*/
get_header();
?>
<body class="home">
<div id="wrapper">
<?php include_once __DIR__ . '/menu.php'; ?>
<div id="content">
<?php while (have_posts()) : the_post(); ?>
<?php the_content(); ?>
<?php endwhile; ?>
</div>
<?php get_footer(); ?>
</div>
</body>
</html>
Arkusz styli – style.css
Jeśli miałeś zdefiniowany arkusz styli w swoim statycznym szablonie to po prostu skopiuj go do folderu i na górze wklej informacje o swoim szablonie.
/*
Theme Name: My Theme
Theme URI: http://my_uri
Author: author_name
Author URI: author_uri
Version: 1.0
*/
Screenshot.png
Możesz zrobić zrzut ekranu skoÅ„czonego szablonu i zapisać jako screenshot.png. Zalecany rozmiar to 880×660 px.
Kokpit
Przejdź do kokpitu WordPress. Powinien siÄ™ tam pojawić Twój szablon. JeÅ›li zrobiÅ‚eÅ› screenshot.png to pojawi siÄ™ również jego miniaturka. Po wybraniu szablonu, zdefiniuj menu nawigacyjne w sekcji WyglÄ…d -> Menu. W razie problemów z dziaÅ‚aniem, przeÅ›ledź logi ze swojego serwera – może popeÅ‚niÅ‚eÅ› literówkÄ™ przy pisaniu kodu PHP.
Podsumowanie
Dzięki temu mini tutorialowi, powinieneś zaznajomić się z filozofią szablonów WordPress. Oczywiście możesz go rozszerzyć zarówne o nowe pliki szablonów np. dla postów (plik single.php), utworzyć własną stronę dla stron nie znalezionych (404.php) jak i zmieniając zachowanie silnika WordPress oraz wtyczek (functions.php).
Strona Internetowa
Potrzebujesz Å‚adnej strony internetowej? Zobacz demo na: tej stronie
Komentarze