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 DefaultTwentySeventeen:
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
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 
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:
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!
Alat AI Hot
Undress AI Tool
Gambar buka pakaian secara percuma
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
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
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
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
Jun 25, 2025 am 12:19 AM
Tosetupredirectsinwordpressusingthe.htaccessfile, locatethefileinyoursite'srootdirectoryandaddredirectrulesabovethe#startwordpresssection.forbasic301redirects, usetheformatredirect301/old-pageShen./
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
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
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
Jun 29, 2025 am 12:03 AM
Tointegratetheird-partyapisIntowordPress, ikuti: 1.celectabeapiandobtaincredentialslikeapikeysoroauthtokensbyregisteringandkeepingthemsecure.2.Choosebetweenpluginsforsimplicity_
