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><!DOCTYPE html></span>
</span><span><span><span><html</span> <span><span><?php language_attributes(); ?></span></span>></span>
</span><span><span><span><head</span>></span>
</span>    <span><span><span><title</span>></span><span><?php bloginfo('name'); ?></span><span><span></title</span>></span>
</span>    <span><span><span><link</span> 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></head</span>></span>
</span><span><span><span><body</span>></span>
</span>
      <span><span><span><header</span>></span>
</span>         <span><span><span><h1</span>></span><span><?php bloginfo('name'); ?></span><span><span></h1</span>></span>
</span>         <span><span><span><h3</span>></span><span><?php bloginfo('description'); ?></span><span><span></h3</span>></span>
</span>      <span><span><span></header</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></body</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>

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><!DOCTYPE html></span>
</span><span><span><span><html</span> <span><span><?php language_attributes(); ?></span></span>></span>
</span><span><span><span><head</span>></span>
</span>    <span><span><span><title</span>></span><span><?php bloginfo('name'); ?></span><span><span></title</span>></span>
</span>    <span><span><span><link</span> 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></head</span>></span>
</span><span><span><span><body</span>></span>
</span>
      <span><span><span><header</span>></span>
</span>         <span><span><span><h1</span>></span><span><?php bloginfo('name'); ?></span><span><span></h1</span>></span>
</span>         <span><span><span><h3</span>></span><span><?php bloginfo('description'); ?></span><span><span></h3</span>></span>
</span>      <span><span><span></header</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></body</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>

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><!DOCTYPE html></span>
</span><span><span><span><html</span> <span><span><?php language_attributes(); ?></span></span>></span>
</span><span><span><span><head</span>></span>
</span>    <span><span><span><title</span>></span><span><?php bloginfo('name'); ?></span><span><span></title</span>></span>
</span>    <span><span><span><link</span> 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></head</span>></span>
</span><span><span><span><body</span>></span>
</span>
      <span><span><span><header</span>></span>
</span>         <span><span><span><h1</span>></span><span><?php bloginfo('name'); ?></span><span><span></h1</span>></span>
</span>         <span><span><span><h3</span>></span><span><?php bloginfo('description'); ?></span><span><span></h3</span>></span>
</span>      <span><span><span></header</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></body</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>

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</span> id<span>="post-<span><?php the_ID(); ?></span>"</span>></span>
</span>        <span><span><span><h2</span>></span><span><?php the_title(); ?></span><span><span></h2</span>></span>
</span>        <span><span><span><div</span> class<span>="post-excerpt"</span>></span><span><?php the_excerpt(); ?></span><span><span></div</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>

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:

/**
 *
 * @package Botega_Scratch_Theme
 */

get_header(); ?>

    <span><span><?php
</span></span><span>    <span>if ( have_posts() ) : while ( have_posts() ): the_post(); ?></span>
</span>
    <span><span><span><div</span> id<span>="post-<span><?php the_ID(); ?></span>"</span>></span>
</span>        <span><span><span><h2</span>></span><span><?php the_title(); ?></span><span><span></h2</span>></span>
</span>        <span><span><span><div</span> class<span>="post-excerpt"</span>></span><span><?php the_excerpt(); ?></span><span><span></div</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>

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><!DOCTYPE html></span>
</span><span><span><span><html</span>></span>
</span><span><span><span><head</span>></span>
</span><span><span><span><meta</span> charset<span>="<span><?php bloginfo( 'charset' ); ?></span>"</span>></span>
</span><span><span><span><meta</span> 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></head</span>></span>
</span>
<span><span><span><body</span> <span><span><?php body_class(); ?></span></span>></span>
</span>
  <span><span><span><nav</span> class<span>="navbar navbar-default navbar-custom navbar-fixed-top"</span>></span>
</span>    <span><span><span><div</span> class<span>="container-fluid"</span>></span>
</span>      <span><span><span><div</span> class<span>="navbar-header page-scroll"</span>></span>
</span>              <span><span><span><a</span> href<span>="<span><?php echo esc_url( home_url( '/' ) ); ?></span>"</span> rel<span>="home"</span> class<span>="navbar-brand"</span>></span><span><?php bloginfo( 'name' ); ?></span><span><span></a</span>></span>
</span>      <span><span><span></div</span>></span>
</span>
      <span><span><span><div</span> class<span>="collapse navbar-collapse"</span> id<span>="bs-example-navbar-collapse-1"</span>></span>
</span>          <span><span><span><ul</span> class<span>="nav navbar-nav navbar-right"</span>></span>
</span>          <span><span><?php wp_nav_menu( array( 'theme_location' => 'primary', 'items_wrap' => '%3$s' ) ); ?></span>
</span>          <span><span><span></ul</span>></span>
</span>      <span><span><span></div</span>></span>
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></nav</span>></span>
</span>
  <span><span><span><div</span> class<span>="container"</span>></span>
</span>      <span><span><span><div</span> class<span>="row"</span>></span>
</span>

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.

kita perlu memastikan bahawa halaman depan kami - dengan menu atas dinamik - akan kelihatan baik walaupun pengguna dilog masuk. WordPress menunjukkan bar admin 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.

kami akan menambah ini ke gaya.css kami:

<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></div</span>></span>
</span>     <span><!-- /.row -->
</span>  <span><span><span></div</span>></span>
</span>  <span><!-- /.container -->
</span>
  <span><!-- Footer -->
</span>  <span><span><span><footer</span>></span>
</span>    <span><span><span><div</span> class<span>="container"</span>></span>
</span>      <span><span><span><div</span> class<span>="row"</span>></span>
</span>          <span><span><span><div</span> class<span>="col-lg-8 col-md-10 mx-auto"</span>></span>
</span>          <span><span><span></div</span>></span>
</span>      <span><span><span></div</span>></span><!-- /.row -->
</span>    <span><span><span></div</span>></span><!-- /.container -->
</span>  <span><span><span></footer</span>></span><!-- /footer -->
</span>
<span><span><?php wp_footer(); ?></span>
</span>
<span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>

ini memastikan #Mainnav-bekas menu kami-mempunyai cukup mengimbangi dari atas, jadi ia tidak dilindungi apabila pengguna dilog masuk. WordPress menambah kelas log masuk dan pentadbir ke badan dalam kes ini, begitu juga kita boleh menargetkannya dengan mudah. ​​

kita dapat melihat bahawa kita menangani dua kes dalam CSS kita - satu lalai, dan satu lagi untuk skrin yang lebih kecil. Ini kerana WordPress mengeluarkan bar admin yang lebih luas pada peranti mudah alih, jadi kita perlu menyediakan offset 46px.

di telefon bimbit, kita kini harus mempunyai menu dropdown yang responsif, javascript:

Kesimpulan

Dalam bahagian kedua ini untuk mencipta tema WordPress dari awal, kami mencipta tema WordPress yang sangat asas, dan kami termasuk gaya bootstrap dan skrip ke dalamnya. Kami menyesuaikan output menu agar sesuai dengan gaya yang telah ditetapkan. Kami juga memisahkan output header dan footer ke bahagian masing -masing.

Fail Functions.php - Fail penting dalam pembangunan tema - adalah topik lain yang kami diperkenalkan dan dimanfaatkan. Output header telah dipisahkan ke dalam fungsinya sendiri, yang akan menggunakan butir-butir lawatan halaman, dan pembolehubah yang ditakrifkan oleh pemilik tapak untuk menentukan output akhir.

Di bahagian ketiga panduan, kami akan menyelesaikan membina templat tertentu, memberikan struktur yang lebih baik kepada fungsi tema dan separa kami, dan menyelesaikan gaya laman web kami.

---

Terdapat tiga artikel dalam siri ini untuk membina tema WordPress dari awal:

• Memahami struktur tema
• Asas Tema
• Menapis tema

Soalan Lazim (Soalan Lazim) Mengenai Membangun Tema WordPress Dari Scratch

Apakah prasyarat untuk membina tema WordPress dari awal? Ini adalah teknologi teras yang digunakan dalam pembangunan tema WordPress. Di samping itu, anda harus biasa dengan platform WordPress itu sendiri, termasuk struktur fail dan hierarki templat. Ia juga berguna untuk mempunyai persekitaran pembangunan tempatan yang ditubuhkan di komputer anda, seperti MAMP atau XAMPP, di mana anda boleh menguji tema anda semasa anda membinanya. 🎜>

Langkah pertama dalam membina tema WordPress dari awal adalah untuk membuat direktori baru dalam folder Tema WordPress anda. Ini akan menjadi rumah untuk semua fail tema anda. Seterusnya, anda perlu membuat fail gaya.css dan fail index.php. Fail gaya.css adalah di mana anda akan menulis semua kod CSS anda, dan ia juga di mana anda akan menentukan butiran tema anda. Fail index.php adalah fail templat utama untuk tema anda. Di sinilah anda akan menulis kod PHP dan HTML yang menghasilkan susun atur laman web anda. Mewujudkan fail Functions.php dalam direktori tema anda. Fail ini bertindak seperti plugin, membolehkan anda menambah ciri dan fungsi tersuai untuk tema anda. Anda boleh menggunakannya untuk mendaftarkan menu navigasi, menambah sidebars, gaya enqueue dan skrip, dan banyak lagi. 'LL perlu menggunakan pertanyaan media dalam kod CSS anda. Pertanyaan media membolehkan anda menggunakan gaya yang berbeza bergantung pada saiz skrin pengguna. Ini bermakna anda boleh membuat susun atur yang berbeza untuk peranti desktop, tablet, dan mudah alih. Anda juga perlu memastikan imej anda responsif, yang boleh anda lakukan dengan menetapkan lebarnya kepada 100%.

Bagaimana saya menyesuaikan tajuk dan footer tema WordPress saya? . Fail header.php adalah di mana anda akan menulis kod HTML dan PHP untuk tajuk anda, dan fail footer.php adalah di mana anda akan menulis kod untuk footer anda. Anda kemudiannya boleh memasukkan fail -fail ini dalam fail template anda yang lain menggunakan fungsi get_header () dan get_footer (). Jenis Pos tersuai ke tema WordPress anda dengan menggunakan fungsi register_post_type () dalam fail functions.php anda. Fungsi ini membolehkan anda menentukan jenis pos baru dengan label, keupayaan, dan ciri sendiri. Anda kemudian boleh membuat fail tunggal {posttype} .php dan arkib- {posttype} .php Fail Untuk mengawal paparan jenis post tersuai anda.

Anda boleh menambah bar sisi ke tema WordPress anda dengan membuat fail sidebar.php dalam direktori tema anda dan menggunakan fungsi register_sidebar () dalam fail fungsi.php anda. Anda kemudian boleh memaparkan bar sisi anda dalam fail template anda yang lain menggunakan fungsi get_sidebar ().

Bagaimana saya menambah menu navigasi ke tema WordPress saya? Tema WordPress dengan menggunakan fungsi register_nav_menus () dalam fail fungsi.php anda. Fungsi ini membolehkan anda mendaftarkan satu atau lebih menu navigasi dalam tema anda. Anda kemudian boleh memaparkan menu anda dalam fail template anda yang lain menggunakan fungsi wp_nav_menu ().

Bagaimana saya menyesuaikan gelung dalam tema WordPress saya? dengan mengubahsuai kod gelung dalam fail index.php anda atau fail templat lain. Gelung adalah kod PHP yang digunakan WordPress untuk memaparkan siaran. Anda boleh menyesuaikannya untuk menukar cara siaran dipaparkan, bilangan siaran yang dipaparkan, dan banyak lagi. ke fail tema anda dan kemudian memuat naiknya ke laman WordPress anda. Jika anda menggunakan tema kanak -kanak, anda boleh mengemas kini tema induk tanpa kehilangan perubahan anda. Jika anda tidak menggunakan tema kanak -kanak, anda harus membuat sandaran tema anda sebelum mengemas kini, kerana kemas kini akan menimpa perubahan anda.

Atas ialah kandungan terperinci Cara Membina Tema WordPress Dari Gores: Asas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!