▸Programowanie▸WordPress – wÅ‚asny szablon w Twitter Bootstrap
26
cze
2014

Wordpress – wÅ‚asny szablon w Twitter Bootstrap

Programowanie
Brak komentarzy

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(); ?&gt>
<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&amp;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">
      &amp;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 strona internetowa

Podobne artykuły

Blox – eksport wpisów Dynamiczne menu nawigacyjne w Django Obliczanie wyrażeÅ„ matematycznych ONP w Delphi Bot GG w C# – implementacja protokoÅ‚u- wyszukiwarka GUS – nowa wyszukiwarka REGON w C#, Delphi, PHP

Komentarze

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *