Merancang halaman Laman Utama Tersuai untuk Laman Web WordPress Anda

WordPress digunakan di sebahagian besar tapak di web. Ia membolehkan kami membuat pelbagai jenis tapak, tetapi salah satu komponen yang paling penting dari mana -mana laman web adalah halaman utama. Halaman pendaratan yang sempurna akan membantu anda mengurangkan kadar lantunan, meningkatkan lalu lintas dan pelanggan. Dalam artikel ini, kami akan merangkumi bagaimana kami boleh membuat halaman utama (atau halaman pendaratan) dari laman web WordPress.

Terdapat banyak cara untuk mencapai matlamat ini, ini hanya

satu cara .

Gambaran keseluruhan tentang apa yang akan kita sampaikan dalam artikel ini

Pertama, kami akan melengkapkan langkah -langkah asas ini:

Tunjukkan gelangsar pada halaman indeks WordPress.
Tunjukkan tiga panel untuk memaparkan keterangan produk.
Tunjukkan dua baris yang mengandungi butiran mengenai produk anda dengan imej dan teks bersebelahan.
panel, menunjukkan ahli pasukan anda.

Kemudian, kita akan melihat topik lanjutan berikut:

mengambil kandungan dari halaman lain (contohnya dari halaman mengenai kami).
Membuat bar sisi untuk halaman depan sahaja.
Aspek yang paling penting ialah kita dapat mengubah imej gelangsar dari pilihan 'WordPress Customizer'. Kami tidak akan memerlukan sebarang plugin untuk menambah gelangsar atau membuat tayangan slaid imej.

perkara yang kita perlukan

Kirki Toolkit untuk menyediakan pilihan untuk tema.
flexslider untuk menyediakan pilihan slider.

Maria Antonietta Perna telah meliputi Kirki dalam artikel sebelumnya, jika anda mencari pengenalan yang baik mengenai topik itu.

Takeaways Key

• Mengoptimumkan halaman utama WordPress anda dengan menggunakan customizer WordPress dengan mudah mengubah elemen seperti slider dan sidebars tanpa memerlukan plugin tambahan.
• Gunakan Kirki Toolkit untuk meningkatkan keupayaan Customizer WordPress, yang membolehkan penyesuaian lanjutan dengan pengekodan minimum.
• menyelaraskan proses reka bentuk dengan menganjurkan fail tema dalam folder 'perpustakaan' untuk pengurusan dan modulariti yang lebih baik.
• Buat slider produk yang menarik secara visual menggunakan FlexSlider, secara langsung diintegrasikan ke dalam tema anda untuk mempamerkan produk atau ciri utama yang menonjol di laman utama.
• Gunakan templat tersuai untuk laman utama anda untuk mengekalkan susun atur unik yang membezakan dari halaman lain tanpa mengubah fail indeks utama.
• memanfaatkan kuasa Kirki untuk menambah dan mengurus komponen UI seperti panel, bahagian, dan medan dalam penyesuai, meningkatkan interaksi dan pengalaman pengguna.
• Pastikan laman utama anda bermaklumat dan menarik dengan memasukkan unsur -unsur dinamik seperti pameran pasukan, penerangan produk terperinci, dan slider interaktif.

nota

Demi modularity, saya telah membuat folder bernama perpustakaan dan meletakkan semua fail fungsi di dalamnya supaya ia menjadi mudah untuk mengedit hanya komponen yang diperlukan. Jangan ragu untuk memasak tema saya di GitHub. Dalam tema ini, saya telah memanggil semua fail di dalam folder perpustakaan dari fail Functions.php. Saya telah menggunakan rangka kerja CSS asas untuk tema ini.

anda akan menemui fail bernama Tema-options.php di dalam folder perpustakaan yang akan kami edit paling banyak dalam tutorial ini. Buka fail itu dalam editor teks kegemaran anda dan bersiaplah untuk mendapatkan tangan anda kotor!

kirki

Kirki bukan rangka kerja. Ia adalah toolkit yang membolehkan pemaju WordPress menggunakan customizer dan memanfaatkan ciri -ciri dan fleksibiliti canggihnya dengan abstrak kod dan menjadikannya lebih mudah bagi semua orang untuk mencipta pengalaman pengguna yang indah dan bermakna.

kita boleh menggunakan kirki untuk menambah konfigurasi, medan, bahagian dan panel ke customizer. Ini tidak menggantikan API Customizer WordPress. API Kirki hanyalah pembungkus untuk kaedah WordPress lalai, memudahkan sintaks dan membolehkan anda menulis lebih banyak dengan kod kurang dan mengambil kesempatan daripada beberapa ciri yang paling canggih.

Muat turun fail kirki dari github dan masukkannya dalam folder bernama 'kirki' di dalam folder tema anda.

Pertama, anda perlu membuat konfigurasi baru. Konfigurasi mempunyai ID unik dan semua bidang yang menggunakan config_id yang sama akan mewarisi sifat konfigurasi itu.

Sebaik sahaja anda menambah konfigurasi anda, anda boleh menambah panel, bahagian dan medan. Sila ambil perhatian bahawa anda harus mempunyai sekurang -kurangnya satu bahagian dalam customizer anda untuk dapat menambah medan. Bidang tidak boleh menjadi 'anak yatim', mereka perlu dikelompokkan dalam seksyen.

Konfigurasi

Kirki membolehkan anda membuat konfigurasi untuk plugin atau tema anda dan kumpulan mereka dengan ID. Semua bidang yang kemudiannya dikaitkan dengan id itu akan mewarisi sifat konfigurasi.

<span>Kirki<span>::</span>add_config( 'my_theme', array(
</span>    <span>'capability'    => 'edit_theme_options',
</span>    <span>'option_type'   => 'option',
</span>    <span>'option_name'   => 'my_theme',
</span><span>) );</span>

• Keupayaan: Mana -mana keupayaan WordPress yang sah. Lihat Codex WordPress untuk butiran.
• option_type: boleh sama ada pilihan atau tema_mod.
• option_name: Jika anda menggunakan pilihan dan bukannya mod tema maka anda boleh menggunakannya untuk menentukan nama pilihan. Semua bidang anda akan disimpan sebagai array di bawah pilihan tersebut dalam pangkalan data WordPress.

Panel

Panel adalah pembalut untuk bahagian, cara untuk mengumpulkan beberapa bahagian bersama.

<span>Kirki<span>::</span>add_panel( 'panel_id', array(
</span>    <span>'priority'    => 10,
</span>    <span>'title'       => __( 'My Title', 'textdomain' ),
</span>    <span>'description' => __( 'My Description', 'textdomain' ),
</span><span>) );</span>

Bahagian

Bahagian adalah pembalut untuk bidang, cara untuk mengumpulkan pelbagai bidang bersama -sama. Semua bidang mesti tergolong dalam seksyen, tidak ada bidang yang boleh menjadi anak yatim.

<span>Kirki<span>::</span>add_section( 'section_id', array(
</span>    <span>'title'          => __( 'My Title', 'textdomain' ),
</span>    <span>'description'    => __( 'My Description', 'textdomain' ),
</span>    <span>'panel'          => '', // Not typically needed.
</span>    <span>'priority'       => 160,
</span>    <span>'capability'     => 'edit_theme_options',
</span>    <span>'theme_supports' => '', // Rarely needed.
</span><span>) );</span>

medan

medan adalah pilihan seperti kotak teks dan kotak semak yang disediakan supaya pengguna dapat memasukkan teks tersuai di dalamnya. Setiap bidang mesti dikaitkan dengan seksyen tertentu sahaja.

<span>function my_custom_text_settings( $fields ) {
</span>
    <span>// Add the controls
</span>    <span>$fields[] = array(
</span>        <span>'label'       => __( 'My custom control', 'translation_domain' ),
</span>        <span>'section'     => 'my_section',
</span>        <span>'settings'    => 'my_setting',
</span>        <span>'type'        => 'text',
</span>        <span>'priority'    => 10,
</span>        <span>'option_type' => 'theme_mod',
</span>        <span>'capability'  => 'edit_theme_options',
</span>    <span>);
</span>
    <span>$fields[] = array(
</span>        <span>'label'       => __( 'My custom control 2', 'translation_domain' ),
</span>        <span>'section'     => 'my_section',
</span>        <span>'settings'    => 'my_setting_2',
</span>        <span>'type'        => 'text',
</span>        <span>'priority'    => 20,
</span>        <span>'option_type' => 'theme_mod',
</span>        <span>'capability'  => 'edit_theme_options',
</span>    <span>);
</span>
    <span>return $fields;
</span>
<span>}
</span><span>add_filter( 'kirki/fields', 'my_custom_text_settings' );</span>

cukup pengenalan. Sekarang mari kita menyesuaikan tema kami!

Mengintegrasikan kirki dengan tema kami

Perkara pertama yang perlu kita lakukan ialah mengintegrasikan Kirki dengan tema kami. Untuk berbuat demikian, buka fail tema-options.php anda yang akan anda dapati dalam folder perpustakaan dan tambahkan kod berikut kepadanya:

<span>// Integrating Kirki with our theme
</span><span>include_once( get_template_directory() . '/kirki/kirki.php' );</span>

Kod di atas menghubungkan fail kirki dengan tema kami. Sila ambil perhatian bahawa seperti yang dinyatakan sebelum ini, fail yang kami muat turun dari sumber GitHub harus diletakkan dalam folder bernama 'Kirki' di dalam folder tema.

Membuat konfigurasi

Seperti yang dinyatakan sebelum ini, kita perlu membuat konfigurasi yang boleh kita gunakan dengan pilihan kami. Tambahkan kod berikut ke fail tema-options.php anda.

<span>// Adding the configuration
</span><span>Kirki<span>::</span>add_config( 'mc', array(
</span>    <span>'capability'    => 'edit_theme_options',
</span>    <span>'option_type'   => 'option',
</span>    <span>'option_name'   => 'mc',
</span><span>) );</span>

Kami telah berjaya membuat konfigurasi untuk tema kami. Sekarang, kami akan menggunakan MC sebagai option_name kami dalam pilihan kami.

reka bentuk

Mari kita lihat reka bentuk halaman pendaratan kami. Halaman rumah kami akan terdiri daripada yang berikut:

1. slider produk (untuk menunjukkan tayangan slaid halaman produk anda).
2. kotak penerangan (untuk menunjukkan beberapa maklumat mengenai syarikat anda).
3. butiran produk (untuk menunjukkan beberapa butiran mengenai produk anda).
4. Pameran Pasukan (untuk menunjukkan butiran mengenai ahli pasukan anda).

kami akan meliputi cara melakukan perkara ini satu demi satu untuk halaman rumah kami.

nota

Semua pilihan akan disesuaikan melalui pilihan Customizer WordPress. Anda perlu melawat Penampilan> Sesuaikan Pilihan Di dalam Panel Admin WordPress anda untuk menyesuaikan pilihan ini.

Membuat templat tersuai untuk halaman depan

Kami tidak mahu menukar fail index.php kami kerana kami boleh membuat templat tersuai untuk halaman depan kami. Dalam templat tersuai ini, kami akan menambah kod kami supaya ia menunjukkan halaman depan kami yang disesuaikan. Oleh itu, kami akan membuat templat tersuai yang akan menunjukkan kandungan di halaman depan.

Buat fail baru di dalam folder tema anda yang dipanggil homepage.php dan tambahkan yang berikut:

<span>Kirki<span>::</span>add_config( 'my_theme', array(
</span>    <span>'capability'    => 'edit_theme_options',
</span>    <span>'option_type'   => 'option',
</span>    <span>'option_name'   => 'my_theme',
</span><span>) );</span>

Di dalam fail ini, kami menambah kod untuk menunjukkan gelangsar.

kita perlu menetapkan ini ke halaman depan statik kita. Tetapi, pada mulanya tidak ada halaman yang akan menggunakan templat ini. Kami perlu membuat halaman baru yang akan menggunakan templat ini. Ikuti langkah -langkah berikut:

1. Buat halaman baru (** halaman> Tambah baru **).
2. tambahkan tajuk ke halaman (mis. ** Laman Utama Kustom Saya **).
3. pilih ** Laman Utama Custom ** dari Templat ** ** Dropdown di bawah ** Atribut halaman **.
4. Klik pada butang ** Terbitkan **.

Sekarang, tetapkan pilihan halaman depan statik di dalam customizer WordPress ke halaman statik dan pilih laman utama tersuai saya (atau jika anda telah menggunakan nama lain untuk halaman tersebut, pilih yang satu) dari dropdown di bawahnya.

Jangan lupa klik pada butang Simpan & Terbitkan dari Customizer.

Anda tidak akan melihat apa -apa perubahan yang dapat dilihat di dalam customizer lagi, kerana kami belum menambah sebarang kod ke fail homepage.php kami. Buka homepage.php dan mari mula menambah kod!

mari tambahkan kod berikut:

<span>Kirki<span>::</span>add_panel( 'panel_id', array(
</span>    <span>'priority'    => 10,
</span>    <span>'title'       => __( 'My Title', 'textdomain' ),
</span>    <span>'description' => __( 'My Description', 'textdomain' ),
</span><span>) );</span>

Kod di atas termasuk fail header.php dan footer.php kami dari direktori tema semasa kami. Sekiranya anda menyegarkan semula adat anda sekarang, anda mungkin akan melihat hanya navigasi dan menu footer.

slider produk

Slider produk menunjukkan produk paling kreatif atau terlaris anda. Ini adalah produk yang dilihat oleh pelawat pertama di laman web anda. Membuat gelangsar produk melibatkan langkah -langkah berikut:

1. Membuat satu set slider (umumnya 5).
2. Menambah imej latar belakang ke gelangsar.
3. Menambah kapsyen ke gelangsar.

Membuat satu set slider

Seperti yang dinyatakan sebelum ini, kami menggunakan FlexSlider untuk menunjukkan gelangsar dalam tema kami. Jadi, pertama, kita perlu memuat turun Flexslider dari GitHub. Kami hanya perlu menggunakan jQuery.flexslider.js, flexslider.css, bg_play_pause.png dan folder fon. Salin sumber -sumber ini ke dalam folder tema anda.

nota

Jika anda bekerja bersama dengan tema yang saya berikan, anda boleh menyalin jQuery.flexslider.js di dalam folder vendor, yang terdapat di dalam folder JS, fail flexslider.css di dalam folder CSS, fail bg_play_pause.png di dalam Folder Imej dan kandungan folder fon (dari sumber github flexslider) di dalam folder fon yang sudah ada di dalam folder tema.

Sekarang, kita perlu memupuk fail -fail ini dengan tema kami. Kami akan menambah kod enqueue berikut ke fail enqueue-scripts.php yang ada di dalam folder perpustakaan:

<span>Kirki<span>::</span>add_config( 'my_theme', array(
</span>    <span>'capability'    => 'edit_theme_options',
</span>    <span>'option_type'   => 'option',
</span>    <span>'option_name'   => 'my_theme',
</span><span>) );</span>

Seterusnya, kami enqueue fail CSS di dalam enqueue-style.php kami, di dalam folder perpustakaan menggunakan kod berikut:

<span>Kirki<span>::</span>add_panel( 'panel_id', array(
</span>    <span>'priority'    => 10,
</span>    <span>'title'       => __( 'My Title', 'textdomain' ),
</span>    <span>'description' => __( 'My Description', 'textdomain' ),
</span><span>) );</span>

Tahniah! Anda telah berjaya memupuk fail FlexSlider dengan tema anda. Anda boleh menyemak sama ada enqueue telah berjaya dengan memeriksa sumber halaman anda. Anda boleh menyemak sumber halaman anda dengan mengklik kanan pada halaman anda dan mengklik pada sumber halaman paparan. Cari flexslider dan anda akan mendapati bahawa fail JS dan CSS telah berjaya dipertahankan.

nota

Jika anda tidak menggunakan tema yang saya berikan, anda mungkin perlu mengedit bahagian berikut: /js/vendor/jquery.flexslider.js dan /css/flexslider.css dan gantikannya dengan jalan ke js anda dan fail CSS.

Pertama sekali, mari buat panel di dalam Customizer WordPress kami yang akan menunjukkan imej, pautan dan kapsyen untuk gelangsar kami.

Buka tema-options.php sekali lagi dan tambahkan kod berikut kepadanya:

<span>Kirki<span>::</span>add_section( 'section_id', array(
</span>    <span>'title'          => __( 'My Title', 'textdomain' ),
</span>    <span>'description'    => __( 'My Description', 'textdomain' ),
</span>    <span>'panel'          => '', // Not typically needed.
</span>    <span>'priority'       => 160,
</span>    <span>'capability'     => 'edit_theme_options',
</span>    <span>'theme_supports' => '', // Rarely needed.
</span><span>) );</span>

Kod di atas menambah panel slider produk ke customizer kami tetapi ia tidak akan dapat dilihat kerana tiada bahagian mempunyai panel ini dan tiada medan mengandungi sebarang bahagian yang berkaitan dengan panel ini. Mengelirukan? Mari kita teruskan dan ia akan menjadi lebih jelas.

Seterusnya, kita perlu menambah bahagian slider produk yang dinamakan untuk laman utama. Ini boleh dilakukan dengan menambahkan kod berikut ke fail tema-options.php:

<span>function my_custom_text_settings( $fields ) {
</span>
    <span>// Add the controls
</span>    <span>$fields[] = array(
</span>        <span>'label'       => __( 'My custom control', 'translation_domain' ),
</span>        <span>'section'     => 'my_section',
</span>        <span>'settings'    => 'my_setting',
</span>        <span>'type'        => 'text',
</span>        <span>'priority'    => 10,
</span>        <span>'option_type' => 'theme_mod',
</span>        <span>'capability'  => 'edit_theme_options',
</span>    <span>);
</span>
    <span>$fields[] = array(
</span>        <span>'label'       => __( 'My custom control 2', 'translation_domain' ),
</span>        <span>'section'     => 'my_section',
</span>        <span>'settings'    => 'my_setting_2',
</span>        <span>'type'        => 'text',
</span>        <span>'priority'    => 20,
</span>        <span>'option_type' => 'theme_mod',
</span>        <span>'capability'  => 'edit_theme_options',
</span>    <span>);
</span>
    <span>return $fields;
</span>
<span>}
</span><span>add_filter( 'kirki/fields', 'my_custom_text_settings' );</span>

Kod di atas menambah slider produk untuk bahagian laman utama di dalam panel slider produk.

Seterusnya, kami menambah medan untuk menunjukkan imej. Kami boleh membuat medan imej menggunakan kod berikut:

<span>// Integrating Kirki with our theme
</span><span>include_once( get_template_directory() . '/kirki/kirki.php' );</span>

Sekarang, jika kita menyegarkan semula adat kita, kita akan melihat panel slider produk telah muncul.

Melalui medan imej, kita boleh menambah imej yang akan ditunjukkan dalam gelangsar. Kami akan membuat empat lagi bidang yang serupa supaya kami dapat mempunyai sekurang -kurangnya lima imej untuk gelangsar. Kod berikut akan menambah empat lagi bidang imej:

<span>// Adding the configuration
</span><span>Kirki<span>::</span>add_config( 'mc', array(
</span>    <span>'capability'    => 'edit_theme_options',
</span>    <span>'option_type'   => 'option',
</span>    <span>'option_name'   => 'mc',
</span><span>) );</span>

kita boleh memuat naik imej melalui medan ini dan kemudian memaparkannya di halaman pendaratan.

Menambah imej latar belakang ke gelangsar

Sekarang, kami akan menambah kod untuk slider produk. Tambah kod berikut di sebelah Php get_header (); ?> di dalam tag php:

<span>Kirki<span>::</span>add_config( 'my_theme', array(
</span>    <span>'capability'    => 'edit_theme_options',
</span>    <span>'option_type'   => 'option',
</span>    <span>'option_name'   => 'my_theme',
</span><span>) );</span>

Garis -garis ini mengambil imej untuk setiap slaid yang telah kami simpan di dalam customizer kami. Dalam langkah seterusnya, kami akan menyemak sama ada mana -mana imej ini wujud atau tidak. Sekiranya ada di antara mereka, kami akan memanggil gelangsar kami.

<span>Kirki<span>::</span>add_panel( 'panel_id', array(
</span>    <span>'priority'    => 10,
</span>    <span>'title'       => __( 'My Title', 'textdomain' ),
</span>    <span>'description' => __( 'My Description', 'textdomain' ),
</span><span>) );</span>

baris ini memeriksa sama ada sebarang imej di dalam mana -mana slaid wujud atau tidak. Jika imej wujud, maka FlexSlider dipanggil. Sekarang, kami akan menggema imej untuk setiap slaid menggunakan kod di bawah:

<span>Kirki<span>::</span>add_section( 'section_id', array(
</span>    <span>'title'          => __( 'My Title', 'textdomain' ),
</span>    <span>'description'    => __( 'My Description', 'textdomain' ),
</span>    <span>'panel'          => '', // Not typically needed.
</span>    <span>'priority'       => 160,
</span>    <span>'capability'     => 'edit_theme_options',
</span>    <span>'theme_supports' => '', // Rarely needed.
</span><span>) );</span>

Seterusnya, kita hanya perlu menambah JavaScript untuk Flexslider untuk berfungsi.

<span>function my_custom_text_settings( $fields ) {
</span>
    <span>// Add the controls
</span>    <span>$fields[] = array(
</span>        <span>'label'       => __( 'My custom control', 'translation_domain' ),
</span>        <span>'section'     => 'my_section',
</span>        <span>'settings'    => 'my_setting',
</span>        <span>'type'        => 'text',
</span>        <span>'priority'    => 10,
</span>        <span>'option_type' => 'theme_mod',
</span>        <span>'capability'  => 'edit_theme_options',
</span>    <span>);
</span>
    <span>$fields[] = array(
</span>        <span>'label'       => __( 'My custom control 2', 'translation_domain' ),
</span>        <span>'section'     => 'my_section',
</span>        <span>'settings'    => 'my_setting_2',
</span>        <span>'type'        => 'text',
</span>        <span>'priority'    => 20,
</span>        <span>'option_type' => 'theme_mod',
</span>        <span>'capability'  => 'edit_theme_options',
</span>    <span>);
</span>
    <span>return $fields;
</span>
<span>}
</span><span>add_filter( 'kirki/fields', 'my_custom_text_settings' );</span>

Menambah kapsyen ke gelangsar

kita juga boleh menambah kapsyen ke slaid kita. Kami hanya perlu menambah medan baru dalam customizer kami yang akan menerima kapsyen (teks) untuk setiap slaid dan echo keluar.

Mari tambahkan medan terlebih dahulu.

<span>// Integrating Kirki with our theme
</span><span>include_once( get_template_directory() . '/kirki/kirki.php' );</span>

kita boleh melakukan perkara yang sama untuk empat slaid lain.

Sekarang, di bahagian depan, di dalam templat laman utama kami, kami perlu mengedit kod kami sedikit untuk memaparkan kapsyen ini.

Pertama, kita perlu menyimpan kapsyen dalam pembolehubah:

<span>// Adding the configuration
</span><span>Kirki<span>::</span>add_config( 'mc', array(
</span>    <span>'capability'    => 'edit_theme_options',
</span>    <span>'option_type'   => 'option',
</span>    <span>'option_name'   => 'mc',
</span><span>) );</span>

Kemudian, ganti kod berikut:

<span>/**
</span><span>Template Name: Custom Homepage
</span><span>**/</span>

dengan kod berikut:

<span>// Add the header
</span><span>get_header();
</span>
<span>// Add the footer
</span><span>get_footer();</span>

Kotak Keterangan

Kotak penerangan boleh memberikan penerangan berguna mengenai produk kami. Kotak ini diletakkan tepat di bawah gelangsar supaya ia menarik perhatian pelawat kami. Kotak ini berguna jika anda ingin menunjukkan butiran mengenai produk anda. Biasanya, terdapat tiga hingga empat kotak (atau panel), tetapi anda boleh mempunyai lebih banyak jika anda mahu.

Dalam tutorial ini, kami mencipta tiga kotak dan menggunakan harta data-equalizer Rangka Kerja Yayasan CSS untuk memberikan ketinggian seragam bagi setiap panel.

mari kita bekerja!

Membuat panel

Pada mulanya, kami akan membuat panel berasingan untuk menunjukkan kotak keterangan. Kami juga boleh menyediakan semua pilihan di bawah panel yang sama (dalam panel pertama yang kami buat), tetapi ia adalah kebiasaan yang baik untuk menjaga perkara yang terpisah untuk kegunaan kemudian.

kita perlu menambah kod berikut di dalam fail tema-options.php kami:

<span>// adding flexslider scripts file in the footer
</span><span>wp_register_script( 'flexslider-js', get_template_directory_uri() . '/js/vendor/jquery.flexslider.js', array( 'jquery' ), '', true );
</span>
<span>wp_enqueue_script( 'flexslider-js' );</span>

Membuat bahagian

Kami kini akan membuat dua bahagian untuk penerangan produk. Kami akan memuat naik imej pada satu bahagian dan menambah keterangan di bahagian lain.

Pertama, buat bahagian untuk imej menggunakan kod berikut:

<span>// flexslider stylesheet
</span><span>wp_register_style( 'magnificient-flexslider-stylesheet', get_stylesheet_directory_uri() . '/css/flexslider.css', array(), '' );
</span>
<span>wp_enqueue_style( 'magnificient-flexslider-stylesheet' );</span>

kemudian membuat bahagian untuk keterangan:

<span>// Adding the Product Slider panel
</span><span>Kirki<span>::</span>add_panel( 'product_slider', array(
</span>    <span>'priority'    => 10,
</span>    <span>'title'       => __( 'Product Slider', 'magnificient' ),
</span>    <span>'description' => __( 'A slider to show the products', 'magnificient' ),
</span><span>) );</span>

Membuat medan

Seterusnya, kita perlu membuat tiga bidang (kerana akan ada tiga kotak dan oleh itu tiga imej) untuk input imej dan selepas itu kita akan membuat tiga bidang untuk penerangan produk. Kodnya kelihatan seperti berikut:

<span>// Adding the Product Slider for Homepage section
</span><span>Kirki<span>::</span>add_section( 'product_slider_for_homepage', array(
</span>    <span>'title'          => __( 'Product Slider for Homepage', 'magnificient' ),
</span>    <span>'description'    => __( 'This slider will be shown on the front page of your website', 'magnificient' ),
</span>    <span>'panel'          => 'product_slider', // Not typically needed.
</span>    <span>'priority'       => 160,
</span>    <span>'capability'     => 'edit_theme_options',
</span>    <span>'theme_supports' => '', // Rarely needed.
</span><span>) );</span>

memaparkan output

Sekarang kita perlu memaparkan output pada templat tersuai kami dengan menggunakan kod berikut.

<span>Kirki<span>::</span>add_config( 'my_theme', array(
</span>    <span>'capability'    => 'edit_theme_options',
</span>    <span>'option_type'   => 'option',
</span>    <span>'option_name'   => 'my_theme',
</span><span>) );</span>

Ini memaparkan output untuk kotak pertama. Begitu juga, kami akan melakukan perkara yang sama untuk dua kotak yang lain.

<span>Kirki<span>::</span>add_panel( 'panel_id', array(
</span>    <span>'priority'    => 10,
</span>    <span>'title'       => __( 'My Title', 'textdomain' ),
</span>    <span>'description' => __( 'My Description', 'textdomain' ),
</span><span>) );</span>

Sekarang pergi ke customizer anda dan tambahkan imej dan keterangan dan anda akan melihat halaman yang memaparkan input anda!

Butiran Produk

Bahagian ini mengandungi dua baris di mana terdapat imej di satu sisi dan keterangan di sisi lain. Bahagian atau bahagian halaman ini boleh digunakan sebagai visual untuk aspek yang paling penting dari produk kepada pelawat.

Membuat panel

Mari buat panel terlebih dahulu. Kami akan memanggilnya butiran produk.

<span>Kirki<span>::</span>add_section( 'section_id', array(
</span>    <span>'title'          => __( 'My Title', 'textdomain' ),
</span>    <span>'description'    => __( 'My Description', 'textdomain' ),
</span>    <span>'panel'          => '', // Not typically needed.
</span>    <span>'priority'       => 160,
</span>    <span>'capability'     => 'edit_theme_options',
</span>    <span>'theme_supports' => '', // Rarely needed.
</span><span>) );</span>

Membuat bahagian

kami akan membuat seksyen untuk bidang menggunakan kod di bawah:

<span>function my_custom_text_settings( $fields ) {
</span>
    <span>// Add the controls
</span>    <span>$fields[] = array(
</span>        <span>'label'       => __( 'My custom control', 'translation_domain' ),
</span>        <span>'section'     => 'my_section',
</span>        <span>'settings'    => 'my_setting',
</span>        <span>'type'        => 'text',
</span>        <span>'priority'    => 10,
</span>        <span>'option_type' => 'theme_mod',
</span>        <span>'capability'  => 'edit_theme_options',
</span>    <span>);
</span>
    <span>$fields[] = array(
</span>        <span>'label'       => __( 'My custom control 2', 'translation_domain' ),
</span>        <span>'section'     => 'my_section',
</span>        <span>'settings'    => 'my_setting_2',
</span>        <span>'type'        => 'text',
</span>        <span>'priority'    => 20,
</span>        <span>'option_type' => 'theme_mod',
</span>        <span>'capability'  => 'edit_theme_options',
</span>    <span>);
</span>
    <span>return $fields;
</span>
<span>}
</span><span>add_filter( 'kirki/fields', 'my_custom_text_settings' );</span>

Membuat medan

Sama seperti konsep yang dilindungi sebelumnya, kami akan membuat dua medan imej dan dua bidang kawasan teks menggunakan kod di bawah.

<span>// Integrating Kirki with our theme
</span><span>include_once( get_template_directory() . '/kirki/kirki.php' );</span>

menunjukkan output

kita perlu menunjukkan output pada templat laman utama tersuai. Buka fail homepage.php anda dan tambahkan kod berikut:

<span>// Adding the configuration
</span><span>Kirki<span>::</span>add_config( 'mc', array(
</span>    <span>'capability'    => 'edit_theme_options',
</span>    <span>'option_type'   => 'option',
</span>    <span>'option_name'   => 'mc',
</span><span>) );</span>

hanya lakukan perkara yang sama untuk baris yang lain juga. Kemudian, pergi ke customizer anda dan muat semula.

Pameran Pasukan

Bahagian halaman ini digunakan untuk memberikan beberapa maklumat mengenai pasukan anda. Bahagian ini sepatutnya berguna, kerana ia membolehkan pelawat kami tahu siapa mereka akan bekerjasama.

Biasanya, bahagian ini mungkin terdiri daripada banyak ahli pasukan. Dalam contoh ini, kami hanya akan menyediakan pilihan untuk tiga ahli, tetapi anda boleh memanjangkannya seperti yang diperlukan.

Membuat panel

Kami akan membuat panel baru dan memanggilnya Pameran Pasukan.

<span>/**
</span><span>Template Name: Custom Homepage
</span><span>**/</span>

Membuat bahagian

Seterusnya, kami akan membuat bahagian yang mempunyai pilihan untuk pameran pasukan.

<span>// Add the header
</span><span>get_header();
</span>
<span>// Add the footer
</span><span>get_footer();</span>

Membuat medan

Akan ada enam bidang yang terdiri daripada tiga medan imej untuk avatar dan tiga medan teks untuk nama ahli.

<span>// adding flexslider scripts file in the footer
</span><span>wp_register_script( 'flexslider-js', get_template_directory_uri() . '/js/vendor/jquery.flexslider.js', array( 'jquery' ), '', true );
</span>
<span>wp_enqueue_script( 'flexslider-js' );</span>

menunjukkan output

Kami kini akan memaparkan imej dan nama tiga ahli pasukan di template laman utama kami. Buka homepage.php dan masukkan yang berikut:

mari pertama menyimpan nilai imej dan teks dalam pembolehubah.

<span>// flexslider stylesheet
</span><span>wp_register_style( 'magnificient-flexslider-stylesheet', get_stylesheet_directory_uri() . '/css/flexslider.css', array(), '' );
</span>
<span>wp_enqueue_style( 'magnificient-flexslider-stylesheet' );</span>

Kemudian, kita boleh menunjukkan setiap ahli menggunakan kod di bawah:

<span>Kirki<span>::</span>add_config( 'my_theme', array(
</span>    <span>'capability'    => 'edit_theme_options',
</span>    <span>'option_type'   => 'option',
</span>    <span>'option_name'   => 'my_theme',
</span><span>) );</span>

Topik Lanjutan

mengambil kandungan dari halaman lain

Kami juga boleh mengambil kandungan halaman lain ke halaman utama kami. Ini amat berguna jika anda ingin menunjukkan beberapa maklumat mengenai syarikat anda dan anda sudah mempunyai halaman mengenai kami. Anda tidak perlu menulis kandungan yang sama sekali lagi. Anda hanya boleh mengambil kandungan itu menggunakan kirki.

kita boleh membuat panel berasingan untuk menyediakan pilihan ini, mari kita lakukan ini!

inilah kod untuk panel:

<span>Kirki<span>::</span>add_panel( 'panel_id', array(
</span>    <span>'priority'    => 10,
</span>    <span>'title'       => __( 'My Title', 'textdomain' ),
</span>    <span>'description' => __( 'My Description', 'textdomain' ),
</span><span>) );</span>

Dan inilah kod untuk bahagian:

<span>Kirki<span>::</span>add_section( 'section_id', array(
</span>    <span>'title'          => __( 'My Title', 'textdomain' ),
</span>    <span>'description'    => __( 'My Description', 'textdomain' ),
</span>    <span>'panel'          => '', // Not typically needed.
</span>    <span>'priority'       => 160,
</span>    <span>'capability'     => 'edit_theme_options',
</span>    <span>'theme_supports' => '', // Rarely needed.
</span><span>) );</span>

Seterusnya, kami akan menunjukkan dropdown dari mana pentadbir boleh memilih halaman mana yang akan dipaparkan di halaman depan. Kita boleh menggunakan pilihan dropdown halaman kirki.

kita boleh menambah medan menggunakan yang berikut:

<span>function my_custom_text_settings( $fields ) {
</span>
    <span>// Add the controls
</span>    <span>$fields[] = array(
</span>        <span>'label'       => __( 'My custom control', 'translation_domain' ),
</span>        <span>'section'     => 'my_section',
</span>        <span>'settings'    => 'my_setting',
</span>        <span>'type'        => 'text',
</span>        <span>'priority'    => 10,
</span>        <span>'option_type' => 'theme_mod',
</span>        <span>'capability'  => 'edit_theme_options',
</span>    <span>);
</span>
    <span>$fields[] = array(
</span>        <span>'label'       => __( 'My custom control 2', 'translation_domain' ),
</span>        <span>'section'     => 'my_section',
</span>        <span>'settings'    => 'my_setting_2',
</span>        <span>'type'        => 'text',
</span>        <span>'priority'    => 20,
</span>        <span>'option_type' => 'theme_mod',
</span>        <span>'capability'  => 'edit_theme_options',
</span>    <span>);
</span>
    <span>return $fields;
</span>
<span>}
</span><span>add_filter( 'kirki/fields', 'my_custom_text_settings' );</span>

Ini membolehkan pilihan di dalam Customizer WordPress. Kami kini boleh mengedit fail homepage.php kami untuk menunjukkan kandungannya. Buka fail itu dan salin kod berikut di mana anda mahu kandungan ini ditunjukkan:

<span>// Integrating Kirki with our theme
</span><span>include_once( get_template_directory() . '/kirki/kirki.php' );</span>

Membuat bar sisi untuk depan sahaja

Membuat bar sisi untuk tema anda adalah mudah jika anda mengikuti codex WordPress. Daripada terperinci di sini, saya hanya akan menambah bar sisi ke tema ini dengan menggunakan kod berikut di dalam fail perpustakaan/widget-areas.php.

Buka widget-areas.php dan tambahkan yang berikut:

<span>// Adding the configuration
</span><span>Kirki<span>::</span>add_config( 'mc', array(
</span>    <span>'capability'    => 'edit_theme_options',
</span>    <span>'option_type'   => 'option',
</span>    <span>'option_name'   => 'mc',
</span><span>) );</span>

nota

fail widget-areas.php yang terletak di dalam folder perpustakaan mengandungi semua kawasan widget untuk tema ini, jadi saya telah menambah kod bar sisi di sana.

Kemudian, kami hanya perlu mengedit fail homepage.php kami untuk menunjukkan kawasan widget ini pada halaman itu. Buka homepage.php anda dan tambahkan kod berikut:

<span>/**
</span><span>Template Name: Custom Homepage
</span><span>**/</span>

Sekarang, apabila anda menambah widget di bar sisi ini, ia akan ditunjukkan pada frontpage sahaja.

membungkusnya

Dalam tutorial ini, saya telah menjelaskan cara membuat halaman pendaratan untuk laman web WordPress anda menggunakan Kirki Toolkit. Anda boleh menghiasi ini dengan beberapa CSS dan menyesuaikannya dengan cara yang anda suka. Ia akan menjadi hebat mempunyai idea -idea yang sejuk tentang melaksanakan toolkit ini dan beritahu saya di bahagian komen di bawah. Sekiranya anda menghadapi sebarang masalah atau mempunyai sebarang pertanyaan, beritahu saya dan saya akan gembira dapat membantu.

Soalan Lazim mengenai Merancang Halaman Utama Tersuai untuk Laman Web WordPress Anda

Bagaimana saya boleh membuat halaman depan statik di WordPress?

Membuat halaman depan statik di WordPress agak mudah. Pertama, anda perlu log masuk ke papan pemuka WordPress anda. Kemudian, pergi ke 'halaman' dan klik pada 'Tambah Baru'. Namakan halaman baru ini 'Home' atau nama lain yang anda suka. Selepas itu, buat satu lagi halaman baru dan namakannya 'blog' atau 'siaran'. Sebaik sahaja anda telah membuat kedua -dua halaman ini, pergi ke 'Tetapan', kemudian 'membaca'. Di bawah 'Paparan Laman Utama Anda', pilih 'Halaman Statik'. Dalam menu dropdown, tetapkan 'HomePage' ke halaman yang anda buat untuk rumah anda dan 'Halaman Pos' ke halaman yang anda buat untuk blog atau catatan anda. Klik 'Simpan Perubahan' untuk memuktamadkan tetapan anda.

Bagaimana saya boleh menyesuaikan laman utama WordPress saya?

WordPress menawarkan pelbagai cara untuk menyesuaikan laman utama anda. Anda boleh menggunakan Customizer WordPress, yang membolehkan anda melihat perubahan dalam masa nyata. Untuk mengaksesnya, pergi ke 'penampilan', kemudian 'menyesuaikan'. Di sini, anda boleh mengubah identiti tapak, warna, imej latar belakang, menu, widget, dan banyak lagi. Sebagai alternatif, anda boleh menggunakan plugin pembina halaman seperti Elementor atau Beaver Builder. Plugin ini menyediakan antara muka drag-and-drop yang menjadikannya mudah untuk merancang laman utama anda dengan tepat bagaimana anda menginginkannya. Laman Utama WordPress, penting untuk memastikan penonton dan tujuan anda dalam fikiran. Pastikan laman web anda jelas menyampaikan siapa anda dan apa yang anda lakukan. Gunakan imej berkualiti tinggi dan tajuk utama yang menarik untuk menarik perhatian pelawat. Pastikan reka bentuk anda bersih dan mudah untuk memudahkan pelawat menavigasi laman web anda. Juga, pastikan laman web anda mesra mudah alih, sebagai peratusan besar trafik web berasal dari peranti mudah alih.

Bagaimana saya boleh menambah tajuk tersuai ke laman utama WordPress saya? Header tersuai ke laman utama WordPress anda, pergi ke 'penampilan', kemudian 'menyesuaikan'. Klik pada 'Header' atau 'Header Image', bergantung pada tema anda. Dari sini, anda boleh memuat naik imej baru, menanamnya ke saiz yang anda inginkan, dan tambahkan teks atau pautan yang anda mahukan. Klik 'Simpan & Terbitkan' Apabila anda selesai.

Bagaimana saya boleh menambah footer tersuai ke laman utama WordPress saya? header. Pergi ke 'penampilan', kemudian 'menyesuaikan'. Klik pada 'Footer' atau 'Footer Settings', bergantung pada tema anda. Di sini, anda boleh menyesuaikan teks footer anda, menambah widget, dan menukar susun atur. Klik 'Simpan & Terbitkan' apabila anda selesai.

bagaimana saya boleh menambahkan gelangsar ke laman utama WordPress saya? Mengaktifkan plugin yang anda pilih, anda boleh membuat gelangsar baru, menambah imej, dan menyesuaikan tetapan. Kemudian, anda boleh menambah gelangsar ke laman utama anda menggunakan tag shortcode, widget, atau template, bergantung pada plugin. Tambah bahagian blog ke laman utama WordPress anda, pertama, pastikan anda telah membuat halaman berasingan untuk catatan blog anda. Kemudian, pergi ke 'penampilan', kemudian 'menyesuaikan'. Klik pada 'Tetapan Laman Utama' dan pilih 'Pos Terkini Anda' di bawah 'Paparan Laman Utama Anda'. Ini akan memaparkan catatan blog terbaru anda di laman utama anda.

Bagaimana saya boleh menambah ikon media sosial ke laman utama WordPress saya?

Plugin media sosial seperti widget media sosial atau ikon sosial yang mudah. Sebaik sahaja anda telah memasang dan mengaktifkan plugin pilihan anda, anda boleh menambah pautan media sosial anda dan pilih gaya dan saiz ikon pilihan anda. Kemudian, anda boleh menambah ikon media sosial ke laman utama anda menggunakan widget. Memilih tema yang bersih dan responsif. Gunakan plugin SEO seperti Yoast SEO untuk mengoptimumkan tag tajuk dan keterangan meta anda. Sertakan kata kunci yang relevan dalam kandungan anda, tetapi elakkan pemadat kata kunci. Gunakan tag header untuk menyusun kandungan anda dan memudahkan dibaca. Juga, pastikan tapak anda memuat dengan cepat, kerana kelajuan halaman adalah faktor ranking.

Bagaimana saya boleh menambah borang hubungan ke laman utama WordPress saya? , anda memerlukan plugin borang hubungan seperti Borang Kenalan 7 atau WPForms. Sebaik sahaja anda telah memasang dan mengaktifkan plugin pilihan anda, anda boleh membuat borang hubungan baru dan menyesuaikan medan seperti yang diperlukan. Kemudian, anda boleh menambah borang hubungan ke laman utama anda menggunakan kod shortc.

Atas ialah kandungan terperinci Merancang halaman Laman Utama Tersuai untuk Laman Web WordPress Anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!