To dość częsty problem kiedy korzysta się np. z darmowych zasobów WordPress. Motywy jak i wtyczki wyglądają ładnie, ale są praktycznie w całości po angielsku. Spowodowane jest to tym, że Internecie obowiązuje głównie ten język. Bardzo dużo osób na świecie go też zna (może nie jako pierwszy język, ale jako kolejny) i używa.

W efekcie zamiast kolejna strona wyświetla nam się „Next” a zamiast autor „author”. Czasami może to robić nie ciekawe wrażenie na naszych odbiorcach.

Jak przetłumaczyć motyw w WordPress

W momencie kiedy po raz pierwszy szukałam rozwiązania mojego problemu w języku polskim nie było jeszcze instrukcji (dzięki rosnącej popularność WordPress to się dość szybko zmienia). A przynajmniej takich jakie łatwo było zrozumieć. Większość autorów opisuje jak przetłumaczyć gotowy szablon z przygotowanym już wcześniej plikiem .POT (autor szablonu pomyślał wcześniej by ułatwić tłumaczenie szablonu na inne języki). Niestety szablon, który miałam wykorzystać był takiego pliku pozbawiony dlatego też  musiałam szukać rozwiązania w języku angielskim.

Rozwiązaniem mojego problemu okazał się mały program Poedit.

• https://poedit.net/

Spotkałam się z tym programem już wcześniej podczas aktualizowania tłumaczenia do innego szablonu.

Tłumaczenie z pomocą Poedit?

W WordPress niestety nie możemy od tak stworzyć jednego pliku z tłumaczeniem, wgrać go na serwer i wszystko będzie działać. Szablon wymaga specjalnie przygotowanego pliku, który Poedit potrafi wygenerować. W efekcie w szablonie są dwa pliki .PO i .MO, ten pierwszy to plik edytowalny a ten drugi stanowi skompilowaną jego wersję (odczytywaną przez WordPress).

Jak użyć programu Poedit?

Na początek trzeba pobrać i zainstalować Poedit na komputerze.

Następnie pobrać na ten sam komputer szablon lub wtyczkę (tak Poedit możemy tłumaczyć nie tylko motywy, ale także pluginy), którą chcemy przetłumaczyć i uruchomić poedit.

Gotowe tłumaczenia lub pliki je ułatwiające przeważnie znajdują się w katalogu languages.

Teraz wybieramy adekwatną opcję. Jeśli mamy gotowy plik .po dla naszego języka otwieramy go w Poedit i edytujemy. Przeważnie występuje plik wersji angielskiej. Sprawdzić to możemy w szablonie lub wtyczce w katalogu languages.

Co w przypadku gdy nie ma gotowego tłumaczenia?

Jeżeli nie mamy jeszcze tłumaczenia to z belki u góry aplikacji wybieramy plik nowe.

Następnie wybieramy język na jaki chcemy dokonać tłumaczenie. Mamy spory wybór języków jak widać.

Po wybraniu zapisujemy nowy plik poprzez przyciśnięcie niebieskiej dyskietki. Dla języka Polskiego będzie to pl_PL.po nie robimy tego jednak w dowolnym miejscu. Zapisujemy plik w szablonie lub wtyczce w katalogu „languages”.

Teraz wybieramy opcję „Wyodrębnij ze źródła”. Otworzy się wtedy nowe okno. Przechodzimy  w nim do zakładki „Ścieżki źródeł” i za pomocą przycisku „+” wybieramy katalog „languages” a następnie przechodzimy wyżej do głównego katalogu, który też wybieramy.

Jeśli poprawnie wybierzemy pojawi się w polu:

.

/

W kolejnym kroku przechodzimy do zakładki „Źródła słów kluczowych”. Za pomocą dostępnych tam opcji wprowadzamy symbole:

__
_e
_n
_x
_ex
_nx
esc_attr__
esc_attr_e
esc_attr_x
esc_html__
esc_html_e
esc_html_x
_n_noop
_nx_noop
translate_nooped_plural()

Na koniec wybieramy przycisk „OK”. W tym momencie aplikacja przeszuka pliki w poszukiwaniu słów spełniających powyższe warunki np:

__(„słowo”, „szablon”);

Teraz otworzy się okno z listą słów do przetłumaczenia.

Czasami podczas generowania pliku występują błędy. W moim przypadku wystarczyło wyeliminować pliki z katalogu „js” czyli skrypty JavaScript. I jeszcze raz przeprowadzić proces.

Uzupełnianie tłumaczeń w Poedit

W przypadku gdy mamy gotowy już gotowy plik po wybraniu opcji  edycji zobaczymy wprowadzone wcześniej tłumaczenia. Z kolei jeżeli dopiero go stworzyliśmy to program podpowiada jak przetłumaczyć niektóre słowa, ale ostatecznie to od nas zależy jak to zrobimy.

Edycja fraz jak i wprowadzanie nowych jest dość prosta. Klikamy w konkretną linijkę na liście a poniżej otwiera się pole edycji.

Po zakończeniu edycji pliku zapisujemy. Warto też sprawdzić czy wszystko zrobiliśmy poprawnie poprzez przycisk – „Weryfikuj”.

Na koniec pliku wgrywany na serwer do odpowiedniego katalogu (languages).  Warto pamiętać, że WordPress czyta pliki .mo a nie .po. Rolą tych drugich jest bycie źródłem dla generowanego .mo. Dlatego najlepiej na serwerze umieścić oba pliki.

Tłumaczenie motywu, wtyczek WordPress z pomocą Wtyczki

Inną metodą przetłumaczenia motywu WordPress jest użycie wtyczki np. Loco Translate. Wtyczka dostępna jest w bibliotece wtyczek więc jej instalacja zajmuje jedynie chwilę. Po uruchomieniu dodaje się ona jako nowa ikonka w lewym panelu jako jedna z ostatnich.

Wtyczka sama tworzy pliki językowe w odpowiednim miejscu. Wprowadzanie tłumaczeń zaś bardzo przypomina to w Poedit.

Wtyczka daje nam możliwość tłumaczenia zarówno motywów jak i pluginów (wtyczek). Wystarczy jedynie wybrać obiekt, który chcemy przetłumaczyć. Czasami niektóre szablony nie są przygotowane we właściwy sposób i niestety nie można ich przetłumaczyć! W takim przypadku niestety tłumaczenie jest nie możliwe nawet jeśli przygotujemy potrzebne nam pliki z tłumaczeniem.

Dodatkowe tagi:
Jak przetłumaczyć skórki na język polski
prosty sposób tłumaczenia (translate) szablonu strony
ręczne tłumaczenie szablonu
Jak zrobić tłumaczenie wordpress dla skórki wtyczki lub widżetu

Artykuł Jak przetłumaczyć motyw lub wtyczkę WordPress pochodzi z serwisu Kurs WordPress od podstaw.

Od razu uprzedzam, że nie będą to bardzo rozbudowane motywy. Jednak ich budowa może przysporzyć trochę problemów. Podczas kolejnych omawianych tematów postaram się jednak dodać do szablonów, motywu dodatkowe opcje.

Jakie pliki, szablony wchodzą w skład motywu?

Na początek warto zacząć od struktury motywu. Podstawowy motyw zawiera więc pliki takie jak:

• index.php
• header.php
• footer.php
• functions.php
• 404.php
• category.php
• page.php
• single.php
• style.css

W skład niego mogą też wchodzić inne pliki jak np. search.php.

Tutorial został podzielony na kilka części:
Część 1 znajdziecie poniżej
Część 2 w kolejnym wpisie

Jeśli masz problem z kodem możesz już teraz pobrać fragment gotowego motywu.

Pobierz

Nazwy katalogów w większości są dowolne chociaż przeważnie występują następujące:

• css
• img lub images
• js
• include

W WordPress większość opcji jest przedefiniowana, co oznacza że zadaniem twórcy motywu jest jedynie utworzenie odpowiedniego pliku, szablonu. Plik ten musi oczywiście posiadać określoną strukturę z od wołaniami do odpowiednich funkcji.

Obecnie większość nowych szablonów wożona jest tak by mogła być responsywna dlatego postanowiłam tworząc ten tutorial mieć to na uwadze. Nie użyje jednak Bootstrap gdyż wymaga on wielu modyfikacji użyje za to bardzo prostego skeleton. Nie posiada on wielu opcji, ale dla małego projektu się sprawdzi. Dodatkowo nie trzeba będzie go mocno modyfikować by uzyskać pożądany efekt.

Tak więc zaczynamy.

Co nam będzie potrzebne

Pobieramy pliki biblioteki CSS skeleton można je pobrać ze strony http://getskeleton.com/

Dodatkowo można pobrać również pliki:

• https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js
• http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
• http://getskeleton.com/js/site.js
• http://getskeleton.com/css/github-prettify-theme.css
• http://getskeleton.com/css/custom.css

Pliki .CSS umieszczamy w katalogu css a .JS w js – zachowujemy układ jaki ma biblioteka skeleton

Ułatwi to pracę jeżeli nie jesteśmy zaawansowanymi programistami i samodzielnie nie potrafimy tworzyć responsywnych stron (RWD) obecnie to standard. Alternatywnie można pobrać inną bibliotekę dającą RWD jak Bootstrap.

Paczka Skeletona zwiera 2 katalogi CSS i images z plikami oraz plik index.html.

Jeżeli nie posiadamy edytora kodu trzeba go ściągnąć (Notatnik się do tego nie nadaje ze względu na kodowanie strony). Ja wykorzystuje do tych celów najczęściej Notepad++, jest to darmowy program przypominający Notatnik więc obsługa nie powinna sprawić nikomu problemu.

Trzeba również mieć postawionego WordPressa np. na localhost (ja używam serwera XAMPP) lub na serwerze w internecie.

Kiedy już posiadamy to wszystko możemy przystąpić do pracy. Zaczynamy od utworzenia folderu, w którym zbudujemy nasz template a w nim na początek dodajemy:

• index.php
• header.php
• footer.php
• functions.php
• style.css

header.php – nagłówek

Zaczniemy może od zawartości pliku header.php. Będzie to nagłówek w naszym motywie a jego szablon przedstawia się następująco:

<!DOCTYPE html>
<!--[if IE 7]>
  <html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
  <html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) & !(IE 8)]><!-->
  <html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
   <meta charset="<?php bloginfo( 'charset' ); ?>">
   <meta name="viewport" content="width=device-width">
     <title><?php wp_title( '|', true, 'right' ); ?></title>
   <link rel="profile" href="http://gmpg.org/xfn/11">
   <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php wp_head(); ?>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script> 
   $(document).ready(function(){
     $("#flip").click(function(){
       $("#panel").slideToggle("slow");
     });
   });
  </script>
</head>
<body <?php body_class(); ?>>
<header id="top" role="banner" class="container">

  <div class="row">
   <div class="three columns"><a href="/"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/logo.png" alt="Twoje logo" style="width:120px;"/></a> 
    <div id="flip">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
	</div>
   </div>
   <div class="nine columns"></div>
   <div class="twelve columns">
   <hgroup>
				<h3 id="site-title">
				<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
				<?php bloginfo( 'name' ); ?></a> </h3>
				<p><?php bloginfo( 'description' ); ?></p>
    </hgroup>
    <nav class="nav-collapse navbar" id="panel">
      <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'navbar-list', 'menu_id' => 'primary-menu' ) ); ?>
    </nav>
   </div>
  </div>
</header>

Jeśli dobrze się przyjrzeć to w kodzie tym znajduje się deklaracja podstawowych funkcji niezbędnych w szablonie.

<?php wp_head(); ?>

W miejscy powyższego kodu zostaną umieszczone odnośniki do wszystkich styli CSS oraz skryptów wykorzystanych później.

<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) & !(IE 8)]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->

Z kolei ten kod dobiera odpowiednio informację o języku naszego szablonu. Jak widać nie jest to sztywne ustawienie.

Teraz by szablon był bardziej funkcyjny dodamy do niego menu.

<nav class="nav-collapse" id="panel">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'navbar-list', 'menu_id' => 'primary-menu' ) ); ?>
</nav>

oraz

<div id="flip"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button></div></div>

W całości kod z zastosowaniem formatowania będzie prezentował się tak:

<div class="container">
  <div class="row">
   <div class="three columns"><a href="/"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/logo.png" alt="SSS" style="width:120px;"/></a> 
    <div id="flip">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button></div></div>
   <div class="nine columns">
    <nav class="nav-collapse" id="panel">
      <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'navbar-list', 'menu_id' => 'primary-menu' ) ); ?>
    </nav>
   </div>
  </div>
</div>

Za pomocą zmiennej umieszczonej poniżej można uzyskać adres do aktualnie wykorzystywanego szablonu. Jest to bardzo przydatne gdyż nie musimy podawać całego adresu do np. obrazków umieszczonych w szablonie.

<?php echo esc_url( get_template_directory_uri() ); ?>

Więcej o odnośnikach do strony głównej.

index.php

Teraz pora na index.php

<?php get_header(); ?>

<div class="container">
  <div class="row">
     <?php while ( have_posts() ) : the_post() ?>
   <div class="entry-content">
      <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <h1 class="entry-title"><?php the_title(); ?></h1>
        <?php the_content( __( 'Continue reading <span class="meta-nav">&amp;raquo;</span>', 'your-theme' ) ); ?>
        <?php wp_link_pages('before=<div class="page-link">' . __( 'Pages:', 'your-theme' ) . '&amp;after=</div>') ?>
      </div><!-- .entry-content -->
    </article>
    <?php endwhile; ?>
  </div> 
</div>

<?php get_footer(); ?>

Powyższy kod wypisze stronę główną jeżeli ta będzie statyczną stroną, będziemy mieć jednak problemy z stroną blogową.

<?php get_header(); ?>

<div class="container">
  <div class="row">
    <?php if ( is_home() ){ ?>
      <h1 class="entry-title">Blog</h1>
   <?php } ?>

<?php while ( have_posts() ) : the_post() ?>
    <div class="entry-content">
      <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
     <?php if ( is_home() ){ ?>

<div class="imgpost four columns"><?php the_post_thumbnail(); ?></div>
<div class="content nine columns">
<div class="title"><h3 class="entry-title"> <?php echo get_the_date( 'Y-m-d' ); ?> | <?php the_title(); ?></h3></div>
<?php the_content( __( 'Continue reading <span class="meta-nav">&amp;raquo;</span>', 'your-theme' ) ); ?></div>

<?php } else{ ?>

<h1 class="entry-title"><?php the_title(); ?></h1>
<?php the_content( __( 'Continue reading <span class="meta-nav">&amp;raquo;</span>', 'your-theme' ) ); ?>
<?php } ?>
<div class="clear"></div>

<?php wp_link_pages('before=<div class="page-link">' . __( 'Pages:', 'your-theme' ) . '&amp;after=</div>') ?>
</div><!-- .entry-content -->


<div class="clear"></div>
</article>
<?php endwhile; ?>
</div>
</div>

<?php get_footer(); ?>

Trochę objaśnień:

Powyższy kod spina w pewnym sensie całą stronę poprzez dodanie odwołań do pozostałych elementów:
Dodanie header.php

<?php get_header(); ?>

Dodanie footer.php

<?php get_footer(); ?>

footer.php

Kolejnym elementem jest footer.php

<footer>
<div class="container">
<div class="clear"></div>

<p>Copyright &copy; </p>
</div>
</footer>
<?php wp_footer(); ?>
</body>
</html>

functions.php

Kiedy mamy już te elementy pora na to by szablon stał się zdatny do użytku. W tym celu tworzymy plik functions.php na razie umieścimy w nim tylko kilka elementów.

<?php
add_action( 'wp_enqueue_scripts', 'enqueue_and_register_my_scripts' );
function enqueue_and_register_my_scripts()
{
//register scripts for our theme
wp_register_script('jquery-min', get_stylesheet_directory_uri() . '/js/jquery.min.js');
wp_register_script('run_prettify', get_stylesheet_directory_uri() . '/js/run_prettify.js' );
wp_enqueue_script( 'site', get_stylesheet_directory_uri() . '/js/site.js' );

}

function shape_scripts() {
wp_enqueue_style( 'style', get_stylesheet_uri() );

}
add_action( 'wp_enqueue_scripts', 'shape_scripts' );

add_action( 'after_setup_theme', 'register_my_menu' );
function register_my_menu() {
register_nav_menu( 'primary', __( 'Primary Menu', 'nazwa-szablonu' ) );
register_nav_menu('second-menu', __('Second Menu'));
}
register_nav_menus( array(
'primary' => __( 'Primary Navigation', 'nazwa-szablonu' ),
) );

add_theme_support( 'post-thumbnails');
function remove_more_link_scroll( $link ) {
$link = preg_replace( '|#more-[0-9]+|', '', $link );
return $link;
}
add_filter( 'the_content_more_link', 'remove_more_link_scroll' );
add_filter( 'the_content_more_link', 'modify_read_more_link' );
function modify_read_more_link() {
return '<div class="more"><a class="more-link" href="' . get_permalink() . '">Zobacz</a></div>';
}

function cats_meow($glue) {
$current_cat = single_cat_title( '', false );
$separator = "n";
$cats = explode( $separator, get_the_category_list($separator) );
foreach ( $cats as $i => $str ) {
if ( strstr( $str, ">$current_cat<" ) ) {
unset($cats[$i]);
break;
}
}
if ( empty($cats) )
return false;

return trim(join( $glue, $cats ));
}

?>

Każda z tych funkcji pełni inną rolę.

Po zadeklarowaniu poniższej funkcji trzeba utworzyć katalog o nazwie „js” i umieścić w nim pliki javascript (kończące się na js).

add_action( 'wp_enqueue_scripts', 'enqueue_and_register_my_scripts' );
function enqueue_and_register_my_scripts()
{
//register scripts for our theme
wp_register_script('jquery-min', get_stylesheet_directory_uri() . '/js/jquery.min.js');
wp_register_script('run_prettify', get_stylesheet_directory_uri() . '/js/run_prettify.js' );
wp_enqueue_script( 'site', get_stylesheet_directory_uri() . '/js/site.js' );

}

W WordPress skrypty najlepiej dodawać w ten sposób.

Teraz pora na dodanie skryptów CSS. Dzięki tej funkcji po utworzeniu pliku style.css będzie on się automatycznie wczytywał.

function shape_scripts() {
wp_enqueue_style( 'style', get_stylesheet_uri() );

}
add_action( 'wp_enqueue_scripts', 'shape_scripts' );

Kolejny fragment umożliwia nam dodanie własnego menu co z pewnością ułatwi personalizacje szablonu

add_action( 'after_setup_theme', 'register_my_menu' );
function register_my_menu() {
register_nav_menu( 'primary', __( 'Primary Menu', 'nazwa-szablonu' ) );
register_nav_menu('second-menu', __('Second Menu'));
}
register_nav_menus( array(
'primary' => __( 'Primary Navigation', 'nazwa-szablonu' ),
) );

Teraz pora na dodanie możliwości umaszczenia obrazków do wpisu. Nie jest to obowiązkowe, ale szablon będzie o wiele ciekawszy.

add_theme_support( 'post-thumbnails');

Następnie przychodzi czas na red more czyli czytaj dalej. W tym przykładzie przetłumaczyłam to na Zobacz.

$link = preg_replace( '|#more-[0-9]+|', '', $link );
return $link;
}
add_filter( 'the_content_more_link', 'remove_more_link_scroll' );
add_filter( 'the_content_more_link', 'modify_read_more_link' );
function modify_read_more_link() {
return '<div class="more"><a class="more-link" href="' . get_permalink() . '">Zobacz</a></div>';
}

style.css

W ostatnim kroku utworzymy plik style.css.

/*
Theme Name: WP test
Theme URI: http://www.aurainweb.pl
Description: Przykładowy szablon.
Author: Aura
Author URI: http://www.aurainweb.pl
Version: 1.0
Tags: responsive, white, scelton

License: Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)
License URI: http://creativecommons.org/licenses/by-sa/3.0/

This simple theme was built using the example Sceleton theme "Basic marketing site" found on the Bootstrap
*/

@import url('css/normalize.css');
@import url('css/skeleton.css');
@import url('css/custom.css');

Poniżej tej deklaracji samodzielnie uzupełnia się plik styli. Warto też pamiętać by dodać pozostałe style w katalogu css

Skeleton i dociągnięte do niego style i skrypty powinien część pracy wykonać za nas. Nie posiada on jednak typowych dla WordPress klas oraz nie ma responsywnego menu dlatego do pliku style.css trzeba dopisać

img{
	max-width: 100%;
	height:auto;
} 
a{
 text-decoration: none;
}
header.container{
	margin-bottom:30px;
}
 
#primary-menu{
 list-style: none;
}
 .navbar-list{
	width:100%;
}
.navbar-list{
	width:100%;
}
.navbar-list li{
	display: inline-block;
	position:relative;
}
.navbar-list li a{
	display: block;
    padding: 21px 10px;
	margin: 0;
}
.navbar-list li ul{
	width: 100%;
    padding: 0;
    margin: 0;
}
.navbar-list li ul li{
	display: none;
    padding: 10px;
    position: absolute;
    top: 40px;
    background: #fff;
    z-index: 100;
    margin: 0;
	border-bottom: 1px dashed #000;
}
.navbar-list li:hover ul li{
	display: inline-block;
}
 .navbar-list li:hover ul li a{
	 padding:15px;
 }
@media screen and (min-width: 750px) {

.nav-collapse ul ul{
	z-index:1;
	}
.nav-toggle {
	display:none;
}
#flip{
	display:none;
	}
#panel{ 
	display: block !important;
}

.home .oferty .column, .home .oferty .columns, .category .oferty .columns{
	margin-left: 2%;
	}
.home .column:first-child, .home .columns:first-child{
	margin-left: 0%;
	}
.navbar-list li:last-child a{
	border-right:none;
	}
}
@media screen and (max-width: 750px) {
#panel {
padding: 5px;
text-align: center;
background:#0a0a0a;
}
#flip {
padding: 5px;
text-align: center; width:30px;
float:right;
}
 
#panel {
padding: 0px;
display: none;
position: relative;
width:100%; z-index: 1;
}
#panel .navbar-list{width:100%; display:block; background:#0a0a0a;}
#panel .navbar-list li {border-bottom:1px solid #fff;}
#panel .navbar-list li a{color:#fff;}
 
.navbar-toggle {
 position: relative;
 float: right;
 padding: 9px 10px;
 margin-top: 8px;
 margin-right: 15px;
 margin-bottom: 8px;
 background-color: transparent;
 background-image: none;
 border: 1px solid #ddd;
 border-radius: 4px;
 width: 45px;
}
.sr-only {
 position: absolute;
 width: 1px;
 height: 1px;
 padding: 0;
 margin: -1px;
 overflow: hidden;
 clip: rect(0,0,0,0);
 border: 0;
}
.navbar-toggle .icon-bar {
 background-color: #ddd;
 display: block;
 width: 22px;
 height: 3px;
 border-radius: 1px;
 margin-bottom:3px;
}
}

Warto Pamiętać że:

Theme Name: WP test – to nazwa motywu
Tags: responsive, white, scelton :tagi, hasła do motywu

Masz problem pobierz gotowy fragment szablonu.

Pozostałe części motywu pokaże jak utworzyć w kolejnych częściach.

Budujemy własny motyw WordPress cz. 2

Artykuł Budujemy własny motyw WordPress cz. 1 pochodzi z serwisu Kurs WordPress od podstaw.