Cara Membina Tema WordPress Dari Gores: Asas

Dalam tutorial ini, kami akan meneroka struktur fail tema WordPress secara mendalam, dan belajar bagaimana membuat tema asas WordPress dari awal.

Di bahagian pertama siri ini, kami memperkenalkan WordPress Theming, dan terminologi asas yang berkaitan dengan pembangunan tema WordPress. Kami meliputi

templat , partials , hierarki template , jenis postpress wordpress , stylesheet stylesheet, wordpress, wordpress, penapis dan tindakan cangkuk, loop wordpress , tag bersyarat , dan kami secara ringkas melihat struktur fail tema WordPress yang biasa. Takeaways Key

Mula dengan menyediakan tema minimum yang terdedah menggunakan fail index.php dan style.css, memastikan WordPress mengiktiraf tema baru anda.

• Mengintegrasikan bootstrap untuk reka bentuk dan estetika responsif, memodifikasi fail templat untuk memasukkan kelas HTML dan CSS Bootstrap.
• Gunakan fail fungsi.php untuk menambah fungsi tersuai, gaya enqueue dan skrip, dan menguruskan cangkuk WordPress dengan berkesan.
• Sesuaikan output dinamik menu header dan navigasi menggunakan cangkuk dan syarat WordPress untuk menyesuaikan diri dengan jenis halaman yang berbeza.
• Pastikan tema anda responsif dan mesra pengguna pada peranti mudah alih dengan menyesuaikan CSS dan menggunakan pertanyaan media.
Membuat tema minimum yang terdedah

Perkara pertama yang akan kami lakukan ialah memasang plugin yang akan membolehkan kami membuat kumpulan membuat catatan WordPress dan kandungan lain. Dengan cara ini, kami dapat dengan cepat mengisi laman web pembangunan kami tanpa kehilangan terlalu banyak masa. Satu plugin yang berfungsi dengan tujuan ini ialah FakerPress oleh Gustavo Bordoni, yang terdapat dalam repositori plugin WordPress.

3

Sekarang, menggunakan plugin ini, kami akan membuat beberapa kandungan palsu. Ini adalah hasilnya, menggunakan Tema TwentysEventeen

WordPress Default

TwentySeventeen:

Sekarang, kami dengan cepat menyelam dan menubuhkan tema minimum yang terdiri daripada fail index.php semua, dan gaya.css, yang kami perlukan untuk sistem templat WordPress untuk mengenali tema:

Ini adalah gaya.css, yang hanya terdiri daripada komen meta CSS buat masa ini. Komen -komen ini diperlukan.

Ini adalah fail index.php. Ia akan menangkap semua permintaan buat masa ini:

<span>/*
</span><span>Theme Name: Botega Simple Theme
</span><span>Theme URI: https://botega.co.uk
</span><span>Author: Tonino Jankov
</span><span>Author URI: https://botega.co.uk
</span><span>Description: Basic WordPress theme for Sitepoint theme building tutorial
</span><span>Text Domain: bsimple
</span><span>Version: 1.0.0
</span><span>License: GNU General Public License v2 or later
</span><span>*/
</span>

Kami kini memuat naik dan mengaktifkan tema minimum yang kami ada. Saya mengaktifkannya menggunakan wp-cli:

3

Kami tidak menyediakan tangkapan skrin, jadi paparan di backend adalah asas.

Jika kami melawat laman web kami sekarang dalam penyemak imbas, inilah yang akan kita lihat:

Jelas, kita mempunyai kerja untuk dilakukan.

Jika kita melihat kod sumber halaman utama, kita akan melihat bahawa fungsi WP_HEAD () telah mengeluarkan banyak tag WordPress lalai di

, seperti CSS, JavaScript, Link dan Meta Tag. Fungsi BlogInfo () digunakan untuk mengeluarkan maklumat laman web.

Halaman rumah kami kosong, kerana kami tidak mengeluarkan apa -apa di dalam gelung - corak yang digunakan WordPress dalam semua templatnya untuk mengeluarkan kandungan.

Halaman Codex tentang gelung masuk ke dalam butiran mengenainya. Struktur tipikal untuk gelung - yang didasarkan pada php

sementara

struktur kawalan - kelihatan seperti ini:

kita perlu mengisi itu semasa gelung dengan kandungan-atau dengan tag WordPress Outputting kandungan. Jika kita menukar gelung kita, dengan menambah the_title (), the_excerpt (), dan kita menambah markup html dan the_id (), untuk kelihatan seperti ini:

<span><span><?php </span></span><span><span>/**
</span></span><span><span> *
</span></span><span><span> * <span>@package Botega_Scratch_Theme
</span></span></span><span><span> */
</span></span><span><span>?></span>
</span>
<span><span>
</span><span><span><span> <span><span><?php language_attributes(); ?></span></span>></span>
</span><span><span><span>></span>
</span>    <span><span><span><title>></title></span><span><?php bloginfo('name'); ?></span><span><span></span>></span>
</span>    <span><span><span><link> rel<span>="stylesheet"</span> href<span>="<span><?php bloginfo('stylesheet_url'); ?></span>"</span>></span>
</span>    <span><span><?php wp_head(); ?></span>
</span><span><span><span></span>></span>
</span><span><span><span>></span>
</span>
      <span><span><span><header>></header></span>
</span>         <span><span><span><h1 id="gt">></h1></span><span><?php bloginfo('name'); ?></span><span><span></span>></span>
</span>         <span><span><span><h3 id="gt">></h3></span><span><?php bloginfo('description'); ?></span><span><span></span>></span>
</span>      <span><span><span></span>></span>
</span>
        <span><span><?php </span></span><span>        <span>if ( have_posts() ) :
</span></span><span>            <span>/* Start the Loop */
</span></span><span>            <span>while ( have_posts() ) :
</span></span><span>                <span>the_post();
</span></span><span>            <span>endwhile;
</span></span><span>        <span>endif;
</span></span><span>        <span>?></span>
</span>
<span><span><span></span>></span>
</span></span></span></span></span></span></span></span></span></span></span></span>

Kami kini akan mendapat senarai jawatan di halaman rumah kami, tanpa gaya yang digunakan:

<span><span><?php </span></span><span><span>if ( have_posts() ) {
</span></span><span>    <span>while ( have_posts() ) {
</span></span><span>        <span>the_post();
</span></span><span>        <span>//
</span></span><span>        <span>// Post Content here
</span></span><span>        <span>//
</span></span><span>    <span>} // end while
</span></span><span><span>} // end if
</span></span><span><span>?></span>
</span></span>

WordPress menunjukkan halaman blog - halaman arkib untuk semua catatan blog - secara lalai.

Jika kita sekarang melawat URL Post Single-sesuatu seperti http://my-website.com/2018/11/14/Sapiente-ad-facilis-quo-repellat-quos/-kita akan melihat sesuatu seperti ini:

kami

gelung

, walaupun sangat kasar, sebenarnya berfungsi.

menstrukturkan tema kami ke dalam fail dan memohon markup bootstrap

Kami kini akan melaksanakan separa, seperti header.php dan footer.php dan pelbagai templat khusus, semuanya menggunakan markup twitter bootstrap, supaya kami dapat menggayakannya dengan lebih mudah. ​​

Bermula dengan index.php, kami menggantikan semua kandungan sebelum dan selepas gelung dengan fungsi get_header () dan get_footer ():

ini bermakna kita perlu menyediakan semua kandungan dalam parsial yang kita sebutkan.

selaras dengan apa yang kami katakan - bahawa kami akan menggunakan tema Twitter Bootstrap - fail header.php kami akan kelihatan seperti ini:

fail footer.php kami akan kelihatan seperti ini:

<span>/*
</span><span>Theme Name: Botega Simple Theme
</span><span>Theme URI: https://botega.co.uk
</span><span>Author: Tonino Jankov
</span><span>Author URI: https://botega.co.uk
</span><span>Description: Basic WordPress theme for Sitepoint theme building tutorial
</span><span>Text Domain: bsimple
</span><span>Version: 1.0.0
</span><span>License: GNU General Public License v2 or later
</span><span>*/
</span>

Kami menggunakan kelas bootstrap dalam tag HTML kami, dan WP_HEAD () dan WP_FOOTER () Fire WP_HEAD dan WP_Footer Action Hooks.

Perkara seterusnya yang akan kami lakukan ialah termasuk CSS dan JavaScript dari Templat Bootstrap Bersih dari startbootstrap.com, yang dilengkapi dengan lesen MIT, jadi kami boleh menggunakannya secara bebas. Dengan cara ini, tema kami akan dilengkapi dengan gaya yang telah ditetapkan, respons, dan kami masih dapat menggayakannya lagi.

fungsi.php

fungsi.php adalah fail yang datang dengan tema WordPress yang serius. Ini adalah fail yang bertindak sebagai arkib plugin lelaki miskin. Ia membolehkan kami memasukkan sebarang fungsi tersuai dalam tema kami.

kami akan menggunakan fail ini terlebih dahulu untuk memasukkan Bootstrap dan gaya dan skrip tema bootstrap kami:

<span><span><?php </span></span><span><span>/**
</span></span><span><span> *
</span></span><span><span> * <span>@package Botega_Scratch_Theme
</span></span></span><span><span> */
</span></span><span><span>?></span>
</span>
<span><span>
</span><span><span><span> <span><span><?php language_attributes(); ?></span></span>></span>
</span><span><span><span>></span>
</span>    <span><span><span><title>></title></span><span><?php bloginfo('name'); ?></span><span><span></span>></span>
</span>    <span><span><span><link> rel<span>="stylesheet"</span> href<span>="<span><?php bloginfo('stylesheet_url'); ?></span>"</span>></span>
</span>    <span><span><?php wp_head(); ?></span>
</span><span><span><span></span>></span>
</span><span><span><span>></span>
</span>
      <span><span><span><header>></header></span>
</span>         <span><span><span><h1 id="gt">></h1></span><span><?php bloginfo('name'); ?></span><span><span></span>></span>
</span>         <span><span><span><h3 id="gt">></h3></span><span><?php bloginfo('description'); ?></span><span><span></span>></span>
</span>      <span><span><span></span>></span>
</span>
        <span><span><?php </span></span><span>        <span>if ( have_posts() ) :
</span></span><span>            <span>/* Start the Loop */
</span></span><span>            <span>while ( have_posts() ) :
</span></span><span>                <span>the_post();
</span></span><span>            <span>endwhile;
</span></span><span>        <span>endif;
</span></span><span>        <span>?></span>
</span>
<span><span><span></span>></span>
</span></span></span></span></span></span></span></span></span></span></span></span>

Ini adalah cara WordPress-idiomatic termasuk skrip dan gaya dalam tema. Ia membolehkan kita menentukan bahawa kedudukan skrip akan diwarnai (header vs footer) dan keutamaan enqueuing. Kita juga boleh menentukan kebergantungan setiap sumber tertentu di pihak yang lain. Ini akan memastikan sumber akan dimuatkan mengikut urutan yang betul.

Kami menggunakan cangkuk tindakan WP_ENQUEUE_SCRIPTS di sini. Kita boleh mengetahui lebih lanjut mengenainya di Codex. (Kami menutup cangkuk tindakan dalam artikel sebelumnya.)

Di dalam fungsi BSIMPLE_SCRIPTS () tersuai kami - yang kami cangkuk ke WP_ENQUEUE_SCRIPTS ACTION COOK - kami menggunakan dua fungsi WordPress untuk memuat skrip dan gaya kami - WP_ENQUEUE_SCRIPT () dan WP_ENQUEUE_STYLY (). Argumen untuk fungsi ini - seperti yang dinyatakan dalam halaman rujukannya yang berkaitan - membolehkan kita memanfaatkan sepenuhnya fleksibiliti yang kami sebutkan.

kita dapat melihat bahawa kita memuat gaya dari Internet (Google Fonts) dan dari folder tema kami. Oleh itu, kami membuat direktori CSS, JS dan Webfonts dalam folder tema kami, dan menyalin CSS tema bootstrap kami, fail JavaScript, dan fail-fail fontawesome.

kami juga menyalin fail index.php kami ke archive.php, page.php dan fail tunggal.php, yang akan diubah suai.

Sekarang struktur fail tema kami akan kelihatan seperti ini:

Laraskan markup

Jika kita sekarang melawat halaman rumah kita, kita akan melihat menu di bahagian atas - walaupun ia dan halaman masih kacau - kerana baris berikut di tajuk kita masih mengeluarkan menu yang dibungkus di Div dan UL sendiri Tags, jadi ia tidak terjejas oleh gaya bootstrap kami:

Untuk menyelesaikannya, kita perlu pergi ke papan pemuka WP-Admin kami dan membuat-dalam customizer-menu baru. Kami akan namakannya

<span><span><?php </span></span><span><span>if ( have_posts() ) {
</span></span><span>    <span>while ( have_posts() ) {
</span></span><span>        <span>the_post();
</span></span><span>        <span>//
</span></span><span>        <span>// Post Content here
</span></span><span>        <span>//
</span></span><span>    <span>} // end while
</span></span><span><span>} // end if
</span></span><span><span>?></span>
</span></span>

menu atas

. 3 Selepas kami melakukan ini, kami akan pergi ke fail header.php kami Keluarkan baris ini:

<span>/*
</span><span>Theme Name: Botega Simple Theme
</span><span>Theme URI: https://botega.co.uk
</span><span>Author: Tonino Jankov
</span><span>Author URI: https://botega.co.uk
</span><span>Description: Basic WordPress theme for Sitepoint theme building tutorial
</span><span>Text Domain: bsimple
</span><span>Version: 1.0.0
</span><span>License: GNU General Public License v2 or later
</span><span>*/
</span>

di tempat mereka kami meletakkan garis ini:

<span><span><?php </span></span><span><span>/**
</span></span><span><span> *
</span></span><span><span> * <span>@package Botega_Scratch_Theme
</span></span></span><span><span> */
</span></span><span><span>?></span>
</span>
<span><span>
</span><span><span><span> <span><span><?php language_attributes(); ?></span></span>></span>
</span><span><span><span>></span>
</span>    <span><span><span><title>></title></span><span><?php bloginfo('name'); ?></span><span><span></span>></span>
</span>    <span><span><span><link> rel<span>="stylesheet"</span> href<span>="<span><?php bloginfo('stylesheet_url'); ?></span>"</span>></span>
</span>    <span><span><?php wp_head(); ?></span>
</span><span><span><span></span>></span>
</span><span><span><span>></span>
</span>
      <span><span><span><header>></header></span>
</span>         <span><span><span><h1 id="gt">></h1></span><span><?php bloginfo('name'); ?></span><span><span></span>></span>
</span>         <span><span><span><h3 id="gt">></h3></span><span><?php bloginfo('description'); ?></span><span><span></span>></span>
</span>      <span><span><span></span>></span>
</span>
        <span><span><?php </span></span><span>        <span>if ( have_posts() ) :
</span></span><span>            <span>/* Start the Loop */
</span></span><span>            <span>while ( have_posts() ) :
</span></span><span>                <span>the_post();
</span></span><span>            <span>endwhile;
</span></span><span>        <span>endif;
</span></span><span>        <span>?></span>
</span>
<span><span><span></span>></span>
</span></span></span></span></span></span></span></span></span></span></span></span>

Ini akan menghapuskan tag Div dan duplikasi tag UL untuk kami, tetapi kami masih perlu memohon Nav-Item dan Nav-Link ke item menu kami (ke Li dan tag masing-masing). Bagaimana kita akan melakukannya? WP_NAV_MENU tidak memberikan hujah untuk ini. Kami akan menggunakan cangkuk penapis nav_menu_link_attribut Kami memasukkan ini ke dalam fail fungsi kami:

<span><span><?php </span></span><span><span>if ( have_posts() ) {
</span></span><span>    <span>while ( have_posts() ) {
</span></span><span>        <span>the_post();
</span></span><span>        <span>//
</span></span><span>        <span>// Post Content here
</span></span><span>        <span>//
</span></span><span>    <span>} // end while
</span></span><span><span>} // end if
</span></span><span><span>?></span>
</span></span>

Sekarang kita boleh menentukan atribut baru di wp_nav_menu kami di header.php kami:

    <span><span><?php </span></span><span>    <span>if ( have_posts() ) : while ( have_posts() ): the_post(); ?></span>
</span>
    <span><span><span><div> id<span>="post-<span><?php the_ID(); ?></span>"</span>>
        <span><span><span><h2 id="gt">></h2></span><span><?php the_title(); ?></span><span><span></span>></span>
</span>        <span><span><span><div> class<span>="post-excerpt"</span>><span><?php the_excerpt(); ?></span><span><span></span></span>
</div></span>></span>
</span>    <span><span><span></span></span></span></span>
</div></span>></span>
</span>
    <span><span><?php endwhile;
</span></span><span>    <span>endif;
</span></span><span>    <span>?></span>
</span></span></span>

Sekarang pautan menu teratas kami dapat memanfaatkan gaya yang sudah ditakrifkan dalam CSS tema bootstrap kami.

Header Dinamik

untuk dapat menggunakan header dinamik - iaitu, tajuk yang berbeza untuk halaman depan, untuk halaman lain yang dipilih, atau untuk arkib - kami akan menentukan fungsi dinamik_header () dalam fail fungsi.php kami, di mana kami 'LL output markup header kami bergantung pada halaman beban pengunjung.

jadi sekarang fail header.php kami akan berakhir seperti ini:

<span><span><?php </span></span><span><span>/**
</span></span><span><span> *
</span></span><span><span> * <span>@package Botega_Scratch_Theme
</span></span></span><span><span> */
</span></span><span>
</span><span><span>get_header(); ?></span>
</span>
    <span><span><?php </span></span><span>    <span>if ( have_posts() ) : while ( have_posts() ): the_post(); ?></span>
</span>
    <span><span><span><div> id<span>="post-<span><?php the_ID(); ?></span>"</span>>
        <span><span><span><h2 id="gt">></h2></span><span><?php the_title(); ?></span><span><span></span>></span>
</span>        <span><span><span><div> class<span>="post-excerpt"</span>><span><?php the_excerpt(); ?></span><span><span></span></span>
</div></span>></span>
</span>    <span><span><span></span></span></span></span>
</div></span>></span>
</span>
    <span><span><?php endwhile;
</span></span><span>    <span>endif;
</span></span><span>    <span>?></span>
</span>
<span><span><?php get_footer(); ?></span>
</span></span></span></span>

Kami juga akan menentukan fungsi seperti ini:

<span><span><?php </span></span><span><span>/**
</span></span><span><span> * The header for our theme.
</span></span><span><span> *
</span></span><span><span> * <span>@package Botega_Scratch_Theme
</span></span></span><span><span> *
</span></span><span><span> */
</span></span><span><span>?></span>
</span><span><span>
</span><span><span><span>></span>
</span><span><span><span>></span>
</span><span><span><span><meta> charset<span>="<span><?php bloginfo( 'charset' ); ?></span>"</span>></span>
</span><span><span><span><meta> name<span>="viewport"</span> content<span>="width=device-width, initial-scale=1"</span>></span>
</span>
<span><span><?php wp_head(); ?></span>
</span><span><span><span></span>></span>
</span>
<span><span><span> <span><span><?php body_class(); ?></span></span>></span>
</span>
  <span><span><span><nav> class<span>="navbar navbar-default navbar-custom navbar-fixed-top"</span>></nav></span>
</span>    <span><span><span><div> class<span>="container-fluid"</span>>
      <span><span><span><div> class<span>="navbar-header page-scroll"</span>>
              <span><span><span><a> href<span>="<span><?php echo esc_url( home_url( '/' ) ); ?></span>"</span> rel<span>="home"</span> class<span>="navbar-brand"</span>></a></span><span><?php bloginfo( 'name' ); ?></span><span><span></span>></span>
</span>      <span><span><span></span></span></span></span>
</div></span>></span>
</span>
      <span><span><span><div> class<span>="collapse navbar-collapse"</span> id<span>="bs-example-navbar-collapse-1"</span>>
          <span><span><span><ul> class<span>="nav navbar-nav navbar-right"</span>></ul></span>
</span>          <span><span><?php wp_nav_menu( array( 'theme_location' => 'primary', 'items_wrap' => '%3$s' ) ); ?></span>
</span>          <span><span><span></span>></span>
</span>      <span><span><span></span></span></span></span>
</div></span>></span>
</span>    <span><span><span></span></span></span>
</div></span>></span>
</span>  <span><span><span></span>></span>
</span>
  <span><span><span><div> class<span>="container"</span>>
      <span><span><span><div> class<span>="row"</span>>

<p> Untuk dapat menggunakan semua URL semasa atau data pos - seperti dalam gelung - kami mengisytiharkan pembolehubah $ Post Global. Kemudian kami hanya mengisi halaman yang berbeza atau meminta kes -kes dengan HTML pengisi pengisi, yang akan kami selesaikan kemudian. Ini menetapkan asas untuk header yang benar -benar dinamik. </p>
<p> kita perlu memastikan bahawa halaman depan kami - dengan menu atas dinamik - akan kelihatan baik walaupun pengguna dilog masuk. WordPress menunjukkan <em> bar admin </em> ketika pelawat dilog masuk, walaupun mereka melawat halaman depan. Kerana ia mempunyai kedudukan: Tetap, ia mengatasi zon teratas di laman web kami, yang meliputi apa sahaja yang ada di sana, jadi kami perlu menentukan offset untuk menu atas kami. </p>
<p> kami akan menambah ini ke gaya.css kami: </p>
<pre class="brush:php;toolbar:false"><span><span><?php </span></span><span><span>/**
</span></span><span><span> * Footer template partial
</span></span><span><span> *
</span></span><span><span> * <span>@package Botega_Scratch_Theme
</span></span></span><span><span> *
</span></span><span><span> */
</span></span><span><span>?></span>
</span>     <span><span><span></span></span></span></span>