国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Jadual Kandungan
Widget dan Footer Global
Panduan ini bertujuan untuk menjadi pengenalan menyeluruh kepada bangunan tema WordPress. Diharapkan diperkenalkan semua konsep bangunan tema WordPress asas, dan menunjukkan bagaimana mereka berkumpul.
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.
Rumah Tutorial CMS WordTekan Cara Membina Tema WordPress Dari Gores: Langkah Akhir

Cara Membina Tema WordPress Dari Gores: Langkah Akhir

Feb 09, 2025 am 09:42 AM

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:

Cara Membina Tema WordPress Dari Gores: Langkah Akhir

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):

Cara Membina Tema WordPress Dari Gores: Langkah Akhir

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:

Cara Membina Tema WordPress Dari Gores: Langkah Akhir 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. Cara Membina Tema WordPress Dari Gores: Langkah Akhir

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 Cara Membina Tema WordPress Dari Gores: Langkah Akhir

di sudut kanan skrin edit:

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

Cara Membina Tema WordPress Dari Gores: Langkah Akhir

semua perkara ini - dan gaya - boleh digunakan untuk

posts

juga. Cara Membina Tema WordPress Dari Gores: Langkah Akhir

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

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:

Cara Membina Tema WordPress Dari Gores: Langkah Akhir

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:

Cara Membina Tema WordPress Dari Gores: Langkah Akhir 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!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Cara Menggunakan Persekitaran Ujian WordPress Cara Menggunakan Persekitaran Ujian WordPress Jun 24, 2025 pm 05:13 PM

Gunakan persekitaran ujian WordPress untuk memastikan keselamatan dan keserasian ciri-ciri baru, plug-in atau tema sebelum dilancarkan secara rasmi, dan mengelakkan mempengaruhi laman web sebenar. Langkah-langkah untuk membina persekitaran ujian termasuk: memuat turun dan memasang perisian pelayan tempatan (seperti LocalWP, XAMPP), mewujudkan tapak, menyediakan akaun pangkalan data dan pentadbir, memasang tema dan pemalam untuk ujian; Kaedah menyalin laman web rasmi ke persekitaran ujian adalah untuk mengeksport tapak melalui pemalam, mengimport persekitaran ujian dan menggantikan nama domain; Apabila menggunakannya, anda harus memberi perhatian untuk tidak menggunakan data pengguna sebenar, kerap membersihkan data yang tidak berguna, menyokong status ujian, menetapkan semula persekitaran dalam masa, dan menyatukan konfigurasi pasukan untuk mengurangkan perbezaan.

Cara menggunakan git dengan wordpress Cara menggunakan git dengan wordpress Jun 26, 2025 am 12:23 AM

Apabila menguruskan projek WordPress dengan Git, anda hanya perlu memasukkan tema, plugin tersuai, dan fail konfigurasi dalam kawalan versi; Sediakan fail .gitignore untuk mengabaikan direktori, cache, dan konfigurasi sensitif; Gunakan alat web atau alat CI untuk mencapai penggunaan automatik dan perhatikan pemprosesan pangkalan data; Gunakan dasar dua cawangan (utama/membangunkan) untuk pembangunan kolaboratif. Melakukannya boleh mengelakkan konflik, memastikan keselamatan, dan meningkatkan kecekapan dan kecekapan penggunaan.

Cara Membuat Blok Gutenberg Mudah Cara Membuat Blok Gutenberg Mudah Jun 28, 2025 am 12:13 AM

Kunci untuk mewujudkan blok Gutenberg adalah untuk memahami struktur asasnya dan betul menghubungkan sumber depan dan belakang. 1. Sediakan persekitaran pembangunan: Pasang WordPress, Node.js dan @WordPress/skrip tempatan; 2. Gunakan PHP untuk mendaftarkan blok dan tentukan logik penyuntingan dan paparan blok dengan JavaScript; 3. Membina fail JS melalui NPM untuk membuat perubahan berkuatkuasa; 4. Periksa sama ada jalan dan ikon adalah betul apabila menghadapi masalah atau menggunakan masa nyata mendengar untuk membina untuk mengelakkan kompilasi manual berulang. Berikutan langkah -langkah ini, blok Gutenberg yang mudah boleh dilaksanakan langkah demi langkah.

Cara Menyediakan Pengalihan Di WordPress Htaccess Cara Menyediakan Pengalihan Di WordPress Htaccess Jun 25, 2025 am 12:19 AM

Tosetupredirectsinwordpressusingthe.htaccessfile, locatethefileinyoursite'srootdirectoryandaddredirectrulesabovethe#startwordpresssection.forbasic301redirects, usetheformatredirect301/old-pageShen./

Cara Menghilangkan Peraturan Menulis semula secara programatik Cara Menghilangkan Peraturan Menulis semula secara programatik Jun 27, 2025 am 12:21 AM

Di WordPress, apabila menambah jenis artikel tersuai atau mengubahsuai struktur pautan tetap, anda perlu menyegarkan semula peraturan penulisan secara manual. Pada masa ini, anda boleh menghubungi fungsi flush_rewrite_rules () melalui kod untuk melaksanakannya. 1. Fungsi ini boleh ditambah ke cangkuk pengaktifan tema atau plug-in untuk menyegarkan semula secara automatik; 2. Melaksanakan hanya sekali apabila perlu, seperti menambah CPT, taksonomi atau mengubahsuai struktur pautan; 3. Elakkan panggilan yang kerap untuk mengelakkan mempengaruhi prestasi; 4. Dalam persekitaran berbilang tapak, muat semula setiap tapak secara berasingan sesuai; 5. Sesetengah persekitaran hosting boleh menyekat penyimpanan peraturan. Di samping itu, klik Simpan untuk mengakses halaman "Tetapan> Pautan Disematkan" juga boleh mencetuskan penyegaran, sesuai untuk senario tidak automatik.

Cara Menghantar E -mel dari WordPress Menggunakan SMTP Cara Menghantar E -mel dari WordPress Menggunakan SMTP Jun 27, 2025 am 12:30 AM

Menggunakan penggunaan.1.smtpAuthenticateSver, reducingSpamplacement.2.someHostSdisablePHpmail (), MuatingSmtpNEpPNeSheSy.3soSheAsheySheySheAdSheAdoSheySheSy.3soSheAsheySheShpMPMail.3SheSheSy.3soSheAdoShey.3soSheAdoShey.3soSheAdoShey.3soSheAdoShey.3soSheAdoShey.3soSheAdoShey.3soSheAdoShey.3SheShipShPMail.3SheSheSy.3SoSheWoShPMail.

Cara Membuat Tema WordPress Responsif Cara Membuat Tema WordPress Responsif Jun 28, 2025 am 12:14 AM

Untuk melaksanakan reka bentuk tema WordPress yang responsif, pertama, gunakan tag meta HTML5 dan mudah alih, tambahkan tetapan Viewport dalam header.php untuk memastikan terminal mudah alih dipaparkan dengan betul, dan menyusun susun atur dengan tag struktur HTML5; Kedua, gunakan pertanyaan media CSS untuk mencapai penyesuaian gaya di bawah lebar skrin yang berbeza, tulis gaya mengikut prinsip mudah alih pertama, dan titik putus yang biasa digunakan termasuk 480px, 768px dan 1024px; Ketiga, memproses gambar dan susun atur secara elastik, tetapkan maksimum lebar: 100% untuk gambar dan gunakan susun atur flexbox atau grid dan bukannya lebar tetap; Akhirnya, ujian sepenuhnya melalui alat pemaju penyemak imbas dan peranti sebenar, mengoptimumkan prestasi pemuatan, dan memastikan tindak balas

Cara Mengintegrasikan API Pihak Ketiga dengan WordPress Cara Mengintegrasikan API Pihak Ketiga dengan WordPress Jun 29, 2025 am 12:03 AM

Tointegratetheird-partyapisIntowordPress, ikuti: 1.celectabeapiandobtaincredentialslikeapikeysoroauthtokensbyregisteringandkeepingthemsecure.2.Choosebetweenpluginsforsimplicity_

See all articles