Cara Membina Tema WordPress Dari Gores: Langkah Akhir

Dalam artikel ini, kami akan melengkapkan kemunculan kami untuk membina tema WordPress dari awal, memberi tumpuan kepada penapisan templat kami, menambah maklumat meta, pirus pos, sidebars, kawalan mesra pengguna dan banyak lagi.

Ini adalah bahagian ketiga dan terakhir siri WordPress untuk membina tema WordPress. Bahagian 1 memperkenalkan WordPress Theming, dan dalam Bahagian 2 kami membina tema asas. Kami menggunakan templat blog yang bersih dengan startbootstrap untuk menambah gaya kepada tema WordPress kami. Kod yang telah kami tulis setakat ini boleh didapati di GitHub.

Kami telah menambah tunggal.php, page.php, archive.php dan index.php templat setakat ini, tetapi kami meninggalkan tugas memuktamadkannya untuk bahagian tugas ini. Kami memperkenalkan fungsi.php - fail yang digunakan WordPress untuk memasukkan fungsi khusus secara automatik kepada tema kami, dan kami menambah fungsi kepadanya. Kami menambah fungsi header dinamik ke header.php kami, dan kami memisahkan fungsi itu ke dalam fungsi kami.php. Sebaik -baiknya, ini harus dianjurkan ke dalam fail yang berasingan - mungkin dalam folder INC di dalam tema kami - untuk menjaga keadaan bersih.

Dalam Bahagian 2, kami juga memperkenalkan separa - footer.php dan header.php.

Takeaways Key

Gunakan `fungsi.php` untuk menambah fungsi khusus tema dan menyusun kod dengan berkesan ke dalam fail berasingan untuk struktur bersih.
Melaksanakan bahagian templat untuk struktur HTML yang konsisten dan modular merentasi templat yang berbeza seperti `single.php` dan` index.php`.
Dayakan dan uruskan Thumbnail Post dalam tema WordPress menggunakan `add_theme_support ('post-thumbnails');` Untuk imej yang dipaparkan.
Daftar pelbagai sidebar dan kawasan widget melalui `fungsi.php` untuk membolehkan pengurusan kandungan dinamik melalui widget WordPress.
Sesuaikan penampilan tapak dan susun atur secara dinamik menggunakan API Customizer WordPress, membolehkan kawalan mesra pengguna untuk imej latar belakang dan banyak lagi.
Panjangkan penyesuaian jawatan dan halaman tunggal dengan menggunakan prinsip hierarki templat dan `get_template_part` untuk paparan kandungan berstruktur dan spesifik.

Menapis templat

Dalam artikel sebelumnya, kami memisahkan tag kami - pembukaan - ke header.php, dan kami menambah Php body_class (); ?> kepadanya. Ini menambah beberapa kelas semantik kepada badan yang memberitahu kami sama ada kami berada di halaman, siarkan, sama ada kami log masuk, atau tidak, dan sebagainya - membolehkan kami untuk gaya unsur -unsur yang berbeza di laman web kami bergantung pada halaman yang dikunjungi, dan lain -lain perkara.

Jika kita melawat halaman rumah dan membuka konsol penyemak imbas untuk memeriksa kelas -kelas ini, kita akan melihat bahawa kita tidak mempunyai maklumat templat semasa di kalangan kelas ini:

Untuk dapat mengubah perkara -perkara yang dipaparkan WordPress, kita perlu tahu fail apa yang sedang digunakan. Dalam kes kami, index.php digunakan sebagai template sandaran lalai. Infographic ini menunjukkan hierarki templat yang digunakan. Ia boleh menjadi sangat berguna apabila mengatasi atau membuat tema.

Dalam artikel sebelumnya, kami mula menyempurnakan gelung arkib.php, menambah maklumat meta dan lakaran kecil pasang ke artikel yang dikeluarkan. Kami akan memisahkan gelung itu ke dalam fail yang berasingan, masukkannya dalam archive.php dan index.php, dan selesai menyempurnakannya.

Pertama, kami akan menggantikan kandungan dalam kedua -dua fail antara sementara dan akhir dengan satu baris yang meminta fail separa, jadi index.php akan kelihatan seperti ini:

<span><span><?php
</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>                <span>get_template_part( 'partials/content', get_post_type() );
</span></span><span>
</span><span>        <span>endwhile;
</span></span><span>    <span>endif;
</span></span><span>    <span>?></span>
</span>
<span><span><?php get_footer(); ?></span>
</span>

Sebaik sahaja kami telah melakukannya, kami akan meletakkan kandungan yang kami telah digantikan dalam archive.php ke dalam fail partials/content.php:

<span><span><span><div</span> <span><span><?php post_class( 'post-preview' ); ?></span></span> id<span>="post-<span><?php the_ID(); ?></span>"</span>></span>
</span>
<span><span><span><header</span> class<span>="entry-header"</span>></span>
</span>    <span><span><?php
</span></span><span>    <span>if ( is_singular() ) :
</span></span><span>        <span>the_title( '<h1 >', '</h1>' );
</span></span><span>    <span>else :
</span></span><span>        <span>the_title( '<h2 ><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
</span></span><span>    <span>endif;
</span></span><span>
</span><span>    <span>if ( 'post' === get_post_type() ) :
</span></span><span>        <span>?></span>
</span>        <span><span><span><div</span> class<span>="entry-meta"</span>></span>
</span>            <span><span><?php
</span></span><span>            <span>bsimple_posted_on();
</span></span><span>            <span>bsimple_posted_by();
</span></span><span>            <span>?></span>
</span>        <span><span><span></div</span>></span><!-- .entry-meta -->
</span>    <span><span><?php endif; ?></span>
</span><span><span><span></header</span>></span><!-- .entry-header -->
</span>
        <span><span><span><a</span> class<span>="post-thumbnail"</span> href<span>="<span><?php the_permalink(); ?></span>"</span> aria-hidden<span>="true"</span> tabindex<span>="-1"</span>></span>
</span>            <span><span><?php
</span></span><span>            <span>the_post_thumbnail( 'post-thumbnail', array(
</span></span><span>
</span><span>            <span>) );
</span></span><span>            <span>?></span>
</span>        <span><span><span></a</span>></span>
</span>
        <span><span><?php the_excerpt(); ?></span>
</span>
<span><span><span></div</span>></span>
</span>

Sebaik sahaja kami memuat naik perubahan ini ke pelayan, kami akan melihat bahawa halaman depan kami sekarang, dalam setiap jawatan dalam senarai pos, mempunyai maklumat meta - tarikh dan pautan pengarang:

Ini bermakna bahawa kerja separa kita.

Posts Thumbnails

kita dapat melihat bahawa tidak ada jawatan palsu kita mempunyai imej secara umum, dan tidak

imej yang diketengahkan khususnya. Jika kita pergi ke papan pemuka WordPress dan cuba menambah imej yang diketengahkan ke pos/halaman kami, kami akan melihat bahawa tiada medan muat naik fail di bar sisi paling kanan. (Bagi mereka yang tidak dikenali dengan WordPress, lebih lanjut mengenai ciri ini boleh dibaca di sini.)

Post Thumbnails tidak didayakan secara lalai dalam tema WordPress. Ini ciri yang perlu dihidupkan secara khusus dalam tema baru. Kebanyakan tema memilikinya.

untuk melakukan ini, kami termasuk add_theme_support ('post-thumbnails'); garis ke fungsi kami.php.

sekarang gambar kecil diaktifkan.

Sekarang kita boleh mengosongkan pemasangan WordPress kami semua kandungan dengan menggunakan laman web WP-CLI WP kosong-Allow-Root (atau kami boleh melakukannya secara manual dari papan pemuka WordPress), dan memulihkannya dengan FakerPress. Ia harus mengisi jawatan dan halaman dengan imej yang ditampilkan dari internet. (Kami perlu mencipta semula menu teratas seperti sebelumnya, dan memberikan halaman dan jawatan kepadanya.)

satu tip: jika kita membina tema untuk dijual, atau umumnya tema yang akan dikeluarkan kepada khalayak yang lebih luas, kita mungkin mahu menggunakan

data ujian unit tema yang disediakan oleh Automattic, kerana ia mungkin menyediakan Kandungan untuk menguji skop kes dan butiran tema yang lebih luas.

kita boleh menentukan saiz imej kepada fakerpress, tetapi kemungkinan besar masih menghasilkan rupa yang tidak kemas.

Apabila kita membina tema, salah satu teknik yang digunakan untuk mencapai rupa yang digilap dan standard adalah untuk menentukan

saiz kecil . Ini adalah saiz standard WordPress akan mengubah saiz semua imej yang dimuat naik agar sesuai. Kami akan menggunakan fungsi WordPress add_image_size () untuk menambah beberapa saiz imej yang akan digunakan oleh tema kami:

<span><span><?php
</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>                <span>get_template_part( 'partials/content', get_post_type() );
</span></span><span>
</span><span>        <span>endwhile;
</span></span><span>    <span>endif;
</span></span><span>    <span>?></span>
</span>
<span><span><?php get_footer(); ?></span>
</span>

maka kami akan mengeluarkan mana -mana imej yang diformat dengan menggunakan the_post_thumbnail () dalam content.php kami:

<span><span><span><div</span> <span><span><?php post_class( 'post-preview' ); ?></span></span> id<span>="post-<span><?php the_ID(); ?></span>"</span>></span>
</span>
<span><span><span><header</span> class<span>="entry-header"</span>></span>
</span>    <span><span><?php
</span></span><span>    <span>if ( is_singular() ) :
</span></span><span>        <span>the_title( '<h1 >', '</h1>' );
</span></span><span>    <span>else :
</span></span><span>        <span>the_title( '<h2 ><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
</span></span><span>    <span>endif;
</span></span><span>
</span><span>    <span>if ( 'post' === get_post_type() ) :
</span></span><span>        <span>?></span>
</span>        <span><span><span><div</span> class<span>="entry-meta"</span>></span>
</span>            <span><span><?php
</span></span><span>            <span>bsimple_posted_on();
</span></span><span>            <span>bsimple_posted_by();
</span></span><span>            <span>?></span>
</span>        <span><span><span></div</span>></span><!-- .entry-meta -->
</span>    <span><span><?php endif; ?></span>
</span><span><span><span></header</span>></span><!-- .entry-header -->
</span>
        <span><span><span><a</span> class<span>="post-thumbnail"</span> href<span>="<span><?php the_permalink(); ?></span>"</span> aria-hidden<span>="true"</span> tabindex<span>="-1"</span>></span>
</span>            <span><span><?php
</span></span><span>            <span>the_post_thumbnail( 'post-thumbnail', array(
</span></span><span>
</span><span>            <span>) );
</span></span><span>            <span>?></span>
</span>        <span><span><span></a</span>></span>
</span>
        <span><span><?php the_excerpt(); ?></span>
</span>
<span><span><span></div</span>></span>
</span>

Untuk mencapai petikan dalam senarai arkib atau blog kami, kami akan meningkatkan saiz fon, tetapi untuk melakukan ini, kami akan mengurangkan bilangan perkataan yang dikeluarkan oleh the_excerpt () :

<span>add_image_size( 'list-thumb-1', 730, 400, true);
</span><span>add_image_size( 'small-list-thumb-1', 400, 200, true);
</span><span>add_image_size( 'small-list-thumb-2', 300, 200, true);
</span><span>add_image_size( 'small-list-thumb-3', 220, 140, true);
</span>

Untuk dapat mengapung imej (thumbnail yang kami sebutkan) dan petikan, kami menambah yang berikut kepada pemilih elemen induk dalam CSS kami:

<span><span><span><a</span> class<span>="post-thumbnail"</span> href<span>="<span><?php the_permalink(); ?></span>"</span> aria-hidden<span>="true"</span> tabindex<span>="-1"</span>></span>
</span>    <span><span><?php
</span></span><span>    <span>the_post_thumbnail( 'small-list-thumb-1');
</span></span><span>    <span>?></span>
</span><span><span><span></a</span>></span>
</span>

(kami tidak meliputi di sini pelarasan gaya yang lebih kecil yang tidak penting untuk tema itu sendiri.)

Sekarang, kita boleh meningkatkan saiz fon kita, dan mempunyai petikan terapung di sekitar imej, dengan mengapungkan imej (bersama -sama dengan elemen induk):

kami juga akan menggunakan post_thumbnails kemudian, pada jawatan/halaman tunggal.

Sidebar Tema

sidebar tema adalah kawasan widget dalam tema. Mereka perlu didaftarkan dalam sistem WordPress supaya kita boleh meletakkan widget yang berbeza ke kawasan ini. Sebaik sahaja kita berbuat demikian, kita mencetak - atau output - widget ini dalam fail templat kita.

Kami akan mendaftarkan beberapa sidebars dalam tema kami, yang dapat dilihat dalam repositori GitHub tema. Kami melakukan ini dengan menambahkan kod berikut ke fungsi.php kami:

<span># functions.php
</span><span>function custom_excerpt_length( $length ) {
</span>    <span>return 40;
</span><span>}
</span><span>add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );
</span>

di sini, kami menunjukkan cara mendaftarkan dua sidebars. Butiran lanjut mengenai fungsi daftar_sidebar () boleh didapati di wordpress.org.

Kami mendaftarkan sebelas sidebars, tetapi kami tidak perlu mengeluarkan semua ini dalam semua templat halaman atau lokasi laman web. Jika mereka dikeluarkan dalam halaman yang disesuaikan sekarang, mereka boleh diakses dalam

customizer di bawah widget:

Berikut adalah contoh output sebenar kawasan bar sisi atau widget di footer.php - yang bermaksud ia boleh dipaparkan secara global:

di sini kita menggunakan ID bar sisi yang kita gunakan dalam fungsi register_sidebar untuk bahagian bawah_center_sidebar di atas.

<span><span>.home .post-preview.post</span> {
</span>    <span>overflow: hidden;
</span><span>}
</span>

Kami juga mengidap lebar bekas kandungan pusat di halaman rumah bergantung kepada sama ada terdapat sidebars dengan widget aktif (is_active_sidebar ()):

Kami mengeluarkan kelas bootstrap bergantung kepada keadaan ini, pastikan tema tidak akan kelihatan kosong jika kami menghilangkan widget untuk halaman seperti

<span>// Register custom sidebars
</span><span>function sidebar_register() {
</span>
    <span>$args = array(
</span>        <span>'name'          => __( 'home_header', 'bsimple' ),
</span>        <span>'description'   => __( 'home_header', 'bsimple' ),
</span>        <span>'id'            => 'h_h',
</span>        <span>'class'         => 'home_header',
</span>        <span>'before_widget' => ' <div >',
</span>        <span>'after_widget'  => '</div>',
</span>        <span>'before_title'  => '<h2 >',
</span>        <span>'after_title'   => '</h2>',
</span>    <span>);
</span>    <span>register_sidebar($args);
</span>
    <span>$args = array(
</span>        <span>'name'          => __( 'archive_sidebar_1', 'bsimple' ),
</span>        <span>'description'   => __( 'Archive Sidebar no 1', 'bsimple' ),
</span>        <span>'id'            => 'a_s_1',
</span>        <span>'class'         => 'archive_sidebar_1',
</span>        <span>'before_widget' => ' <div >',
</span>        <span>'after_widget'  => '</div>',
</span>        <span>'before_title'  => '<h2 >',
</span>        <span>'after_title'   => '</h2>',
</span>    <span>);
</span>    <span>register_sidebar($args);
</span>
    <span>$args = array(
</span>        <span>'name'          => __( 'bottom_center_sidebar', 'bsimple' ),
</span>        <span>'description'   => __( 'Bottom Center Sidebar', 'bsimple' ),
</span>        <span>'id'            => 'b_c_s',
</span>        <span>'class'         => 'bottom_center_sidebar',
</span>        <span>'before_widget' => '<div >',
</span>        <span>'after_widget'  => '</div>',
</span>        <span>'before_title'  => '<h2 >',
</span>        <span>'after_title'   => '</h2>',
</span>    <span>);
</span>    <span>register_sidebar($args);
</span>
<span>}
</span><span>add_action( 'widgets_init', 'sidebar_register' );
</span>

rumah

. Selepas kami mengisi kawasan widget ini dengan widget dan imej, inilah yang kami dapat:

Tema membentuk dengan baik. Pembaca akan, tentu saja, menyesuaikan gaya dengan keinginan mereka.

Customizer API

Apabila kita bercakap tentang gaya, kita akan menyebutkan API Customizer, dan tunjukkan cara menggunakannya untuk memberikan kawalan mesra pengguna terhadap imej latar belakang untuk tajuk.

Berikut adalah contoh bagaimana kita membuat panel baru , seksyen dan kawalan dalam tema kami (fungsi.php lagi):

<span><span><?php
</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>                <span>get_template_part( 'partials/content', get_post_type() );
</span></span><span>
</span><span>        <span>endwhile;
</span></span><span>    <span>endif;
</span></span><span>    <span>?></span>
</span>
<span><span><?php get_footer(); ?></span>
</span>

perkara utama di sini adalah cangkuk customize_register, dan urutan kaedah $ wp_customize (add_panel, add_section, add_setting, add_control.

Apabila kami menambah tetapan dan kawalan kami dalam fungsi.php, kami menambah kod berikut ke bahagian bawah fungsi BSIMPLE_SCRIPTS () yang kami buat untuk memupuk skrip dan gaya kami:

<span><span><span><div</span> <span><span><?php post_class( 'post-preview' ); ?></span></span> id<span>="post-<span><?php the_ID(); ?></span>"</span>></span>
</span>
<span><span><span><header</span> class<span>="entry-header"</span>></span>
</span>    <span><span><?php
</span></span><span>    <span>if ( is_singular() ) :
</span></span><span>        <span>the_title( '<h1 >', '</h1>' );
</span></span><span>    <span>else :
</span></span><span>        <span>the_title( '<h2 ><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
</span></span><span>    <span>endif;
</span></span><span>
</span><span>    <span>if ( 'post' === get_post_type() ) :
</span></span><span>        <span>?></span>
</span>        <span><span><span><div</span> class<span>="entry-meta"</span>></span>
</span>            <span><span><?php
</span></span><span>            <span>bsimple_posted_on();
</span></span><span>            <span>bsimple_posted_by();
</span></span><span>            <span>?></span>
</span>        <span><span><span></div</span>></span><!-- .entry-meta -->
</span>    <span><span><?php endif; ?></span>
</span><span><span><span></header</span>></span><!-- .entry-header -->
</span>
        <span><span><span><a</span> class<span>="post-thumbnail"</span> href<span>="<span><?php the_permalink(); ?></span>"</span> aria-hidden<span>="true"</span> tabindex<span>="-1"</span>></span>
</span>            <span><span><?php
</span></span><span>            <span>the_post_thumbnail( 'post-thumbnail', array(
</span></span><span>
</span><span>            <span>) );
</span></span><span>            <span>?></span>
</span>        <span><span><span></a</span>></span>
</span>
        <span><span><?php the_excerpt(); ?></span>
</span>
<span><span><span></div</span>></span>
</span>

Kami telah menambah kelas Phome, PFRont dan PGLOBAL ke bekas header kami. Sekarang kita menggunakan

wp_add_inline_style () dan pemegang gaya bsimple yang kami gunakan untuk memupuk gaya tema asas kami pada mulanya-untuk mengeluarkan tetapan customizer yang baru saja kami buat. Kami menggunakan get_theme_mod () untuk mendapatkan setiap tetapan yang kami berdaftar.

Dengan cara ini, kita boleh menetapkan imej untuk tajuk yang kita dipisahkan ke dalam fungsi Dynamic_header () dalam

Bahagian 2 panduan:

<span>add_image_size( 'list-thumb-1', 730, 400, true);
</span><span>add_image_size( 'small-list-thumb-1', 400, 200, true);
</span><span>add_image_size( 'small-list-thumb-2', 300, 200, true);
</span><span>add_image_size( 'small-list-thumb-3', 220, 140, true);
</span>

halaman tunggal dan jawatan

Hierarki templat WordPress membantu kami menargetkan URL dan pos yang tepat yang dimuatkan semasa lawatan, supaya kami dapat merancang output HTML secara atom untuk setiap ini. Banyak kali, kita tidak perlu membuat semua templat.

Menambah imej latar belakang generik untuk semua jawatan atau halaman tidak akan masuk akal. Jadi strategi customizer kami akan berfungsi untuk arkib, untuk senarai blog jawatan, untuk halaman depan, dan juga untuk istilah. Tetapi untuk halaman dan jawatan tertentu, kami mungkin mahu menetapkan imej secara individu.

bagaimana kita melakukan ini?

Dalam fungsi dinamik_header () kami, kami telah menunjuk tajuk untuk

halaman , jadi sekarang kami akan menggunakan gaya inline dan fungsi get_the_post_thumbnail_url () untuk menetapkan gambar ' 🎜> sebagai latar belakang header:

Sekarang pengguna boleh menetapkan imej header untuk setiap halaman. Kita boleh melakukan perkara yang sama untuk kes is_single (), yang akan menggunakan penyelesaian yang sama untuk semua jawatan - termasuk jenis pos tersuai.

<span><span><span><a</span> class<span>="post-thumbnail"</span> href<span>="<span><?php the_permalink(); ?></span>"</span> aria-hidden<span>="true"</span> tabindex<span>="-1"</span>></span>
</span>    <span><span><?php
</span></span><span>    <span>the_post_thumbnail( 'small-list-thumb-1');
</span></span><span>    <span>?></span>
</span><span><span><span></a</span>></span>
</span>

Baris ini akan membolehkan pengguna menambah medan tersuai ke setiap halaman, bernama subtitle_, dan ia akan dikeluarkan ke tajuk halaman:

<span># functions.php
</span><span>function custom_excerpt_length( $length ) {
</span>    <span>return 40;
</span><span>}
</span><span>add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );
</span>

Jika kita tidak melihat bahagian medan tersuai, kita boleh mengaktifkannya melalui pilihan skrin

di sudut kanan skrin edit:

Selepas ini selesai, kami akan melihat medan meta subtitle_ kami yang ditunjukkan di bawah tajuk halaman pada halaman tunggal:

semua perkara ini - dan gaya - boleh digunakan untuk

posts

juga.

sekarang kita perlu memformat output dalam single.php dan page.php juga.

Oleh kerana kekangan ruang panduan ini, kami akan membuat kandungan yang akan kami gunakan dalam kedua -dua templat ini, tetapi strukturnya akan membolehkan pembaca menyesuaikan dan menyesuaikan templat ini lebih khusus jika diperlukan:

<span><span><?php
</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>                <span>get_template_part( 'partials/content', get_post_type() );
</span></span><span>
</span><span>        <span>endwhile;
</span></span><span>    <span>endif;
</span></span><span>    <span>?></span>
</span>
<span><span><?php get_footer(); ?></span>
</span>

Di sini kita menggunakan susun atur tunggal, 10/12 lebar, berpusat dengan kelas MX-Auto. Kami menggunakan kandungan separa-single.php untuk mengeluarkan kandungan sebenar.

Dalam separa ini, kami menggunakan the_content () dan wp_link_pages ():

<span><span><span><div</span> <span><span><?php post_class( 'post-preview' ); ?></span></span> id<span>="post-<span><?php the_ID(); ?></span>"</span>></span>
</span>
<span><span><span><header</span> class<span>="entry-header"</span>></span>
</span>    <span><span><?php
</span></span><span>    <span>if ( is_singular() ) :
</span></span><span>        <span>the_title( '<h1 >', '</h1>' );
</span></span><span>    <span>else :
</span></span><span>        <span>the_title( '<h2 ><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
</span></span><span>    <span>endif;
</span></span><span>
</span><span>    <span>if ( 'post' === get_post_type() ) :
</span></span><span>        <span>?></span>
</span>        <span><span><span><div</span> class<span>="entry-meta"</span>></span>
</span>            <span><span><?php
</span></span><span>            <span>bsimple_posted_on();
</span></span><span>            <span>bsimple_posted_by();
</span></span><span>            <span>?></span>
</span>        <span><span><span></div</span>></span><!-- .entry-meta -->
</span>    <span><span><?php endif; ?></span>
</span><span><span><span></header</span>></span><!-- .entry-header -->
</span>
        <span><span><span><a</span> class<span>="post-thumbnail"</span> href<span>="<span><?php the_permalink(); ?></span>"</span> aria-hidden<span>="true"</span> tabindex<span>="-1"</span>></span>
</span>            <span><span><?php
</span></span><span>            <span>the_post_thumbnail( 'post-thumbnail', array(
</span></span><span>
</span><span>            <span>) );
</span></span><span>            <span>?></span>
</span>        <span><span><span></a</span>></span>
</span>
        <span><span><?php the_excerpt(); ?></span>
</span>
<span><span><span></div</span>></span>
</span>

Sekarang kita mempunyai minimum asas untuk halaman tunggal dan jawatan, tetapi lebih banyak boleh ditambah menggunakan fungsi WordPress. Kami secara automatik boleh menentukan butiran apa yang kami mahukan WordPress untuk output dalam satu siaran, halaman tunggal, dan halaman yang dimiliki oleh kategori tertentu dan lain -lain

Widget dan Footer Global

kami telah mencipta tiga kawasan widget (bar sisi) untuk footer kami, dan kami menambah output ke footer.php. Kami juga menambah bahagian - atau kawasan widget - tepat di atas tag footer. Widget ini tidak khusus untuk halaman rumah, atau halaman, atau arkib, tetapi mereka agak global. Sebaik sahaja kami menetapkan widget kepada mereka, mereka akan memaparkan laman web:

<span>add_image_size( 'list-thumb-1', 730, 400, true);
</span><span>add_image_size( 'small-list-thumb-1', 400, 200, true);
</span><span>add_image_size( 'small-list-thumb-2', 300, 200, true);
</span><span>add_image_size( 'small-list-thumb-3', 220, 140, true);
</span>

apa yang kita dapat ialah kawasan bawah dan kaki yang mudah kita boleh mengisi dengan widget:

kita kini mempunyai tema yang minimum tetapi berfungsi yang boleh kita gunakan untuk memaparkan kandungan.

Panduan ini akan berhenti di sini, tetapi perkara seterusnya pembina tema prospektif mungkin mahu lakukan adalah memastikan semua kes penggunaan dilindungi, dan tema itu 100% penuh. Untuk berbuat demikian, pasang plugin semak tema, antara alat lain, untuk memeriksa tema kami kekurangan, dan pastikan semuanya terpulang kepada piawaian:

Kesimpulan

Panduan ini bertujuan untuk menjadi pengenalan menyeluruh kepada bangunan tema WordPress. Diharapkan diperkenalkan semua konsep bangunan tema WordPress asas, dan menunjukkan bagaimana mereka berkumpul.

Tetapi masih ada perkara yang perlu dipelajari - seperti komen separa, templat pengarang, 404 muka surat dan banyak lagi butiran kecil lain yang harus dilindungi jika kita ingin pergi lebih profesional dengan tema ini.

Kod awal untuk siri ini boleh didapati di GitHub di sini, dan versi akhir tema yang kami bina dalam panduan ini boleh didapati di sini.

Di atas asas -asas ini lebih banyak boleh dibina, dengan bantuan Codex WordPress yang komprehensif.

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

---

Memahami struktur tema

Asas Tema
Menapis tema
• soalan yang sering ditanya mengenai membina tema WordPress dari awal

Bagaimana saya boleh memaparkan kandungan untuk ID halaman yang diberikan tanpa pembungkus

di WordPress?

tag untuk tujuan gaya. Walau bagaimanapun, jika anda ingin memaparkan kandungan tanpa pembungkus

, anda boleh menggunakan penapis 'the_content'. Penapis ini membolehkan anda mengubah suai kandungan siaran selepas ia diambil dari pangkalan data tetapi sebelum ia dicetak ke skrin. Berikut adalah contoh mudah bagaimana anda boleh menggunakan penapis ini untuk mengalih keluar tag

:

fungsi rove_p_tags ($ content) {
return strip_tags ($ content, '

') ;
add_filter ('the_content', 'rove_p_tags');
Kod ini akan mengalih keluar semua

tag dari kandungan pos. Sila ambil perhatian bahawa ini akan menjejaskan semua jawatan, jadi gunakan dengan teliti.

Mengapa halaman depan saya tidak dimuatkan di WordPress? . Berikut adalah beberapa isu biasa dan penyelesaian mereka:

1. Tetapan yang tidak betul: Semak tetapan WordPress anda di bawah Tetapan> Membaca dan pastikan halaman yang betul ditetapkan sebagai halaman depan.

2. Isu Tema: Masalahnya boleh dilakukan dengan tema anda. Cuba beralih ke tema WordPress lalai dan lihat apakah masalah berterusan.

3. Konflik Plugin: Kadang -kadang, plugin boleh bertentangan antara satu sama lain atau dengan tema anda, menyebabkan halaman depan anda tidak dimuatkan. Cuba menyahaktifkan semua plugin dan kemudian mengaktifkan semula mereka satu demi satu untuk mengenal pasti plugin yang bermasalah.

4. Fail yang rosak. Cuba menamakan semula fail .htaccess anda kepada sesuatu seperti .htaccess_old dan lihat apakah itu menyelesaikan masalah. . Berikut adalah contoh asas bagaimana anda boleh melakukan ini:

Pertama, anda perlu mendapatkan ID pos. Anda boleh melakukan ini menggunakan fungsi get_the_id () dalam WordPress. Fungsi ini akan mengembalikan ID pos semasa dalam gelung.

$ post_id = get_the_id (); Anda boleh melakukan ini menggunakan fungsi get_post_field (). Fungsi ini mengambil nilai -nilai medan tertentu dari jawatan. Dalam kes ini, anda ingin mendapatkan medan 'post_content'.

$ post_content = get_post_field ('post_content', $ post_id); Popup. Berikut adalah contoh mudah menggunakan fungsi amaran ():

amaran (' Php echo $ post_content;?>'); Bekerja dengan sempurna dalam semua situasi. Untuk penyelesaian yang lebih mantap, anda mungkin ingin mempertimbangkan menggunakan plugin atau perpustakaan JavaScript yang lebih maju untuk membuat popup.

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