Cara Menambahkan Template dan Desain Kustom ke Format Postingan Blog Divi (Bagian 1 dari 3)

Selamat datang di Hari 1 dari 3 dalam seri kami tentang Cara Menambahkan Gaya Kustom ke Format Postingan Blog Divi. Secara default Divi hadir dengan enam format posting blog: Standar, Video, Audio, Kutipan, Galeri, dan Tautan. Dalam seri ini kami mengajari Anda cara menyesuaikannya dengan php dan css.

Selama 3 hari ke depan, saya akan memandu Anda menyesuaikan semua format posting blog Divi: Standar, Kutipan, Tautan, Video, Audio, dan Galeri. Mengedit semua itu (untuk desain yang ada dalam pikiran saya) memerlukan pengeditan file template single.php. Untuk melakukan ini dengan benar, kita harus membuat tema anak Divi yang akan berisi file template Single.php yang telah diubah. Dan sebelum kita melakukannya, kita juga harus membuat instalasi lokal WordPress menggunakan Desktopserver. Ini akan memberikan ruang pengembangan yang aman bagi kami untuk bermain-main tanpa mempertaruhkan apa pun di situs web langsung.

Seperti yang disarankan oleh judul posting ini, kita perlu tiga hari untuk membahas semuanya dari awal hingga akhir. Hari ini, saya akan menunjukkan cara membuat instalasi lokal WordPress menggunakan Desktopserver dan membuat tema anak yang akan kita gunakan untuk menampung Format Postingan Blog yang telah diubah.

Saya akan menganggap seri ini lebih "maju" daripada sebagian besar tutorial yang diterbitkan di sini. Namun, jika Anda seorang pemula, seri ini sebenarnya merupakan peluang besar bagi Anda untuk meningkatkan keterampilan pengembangan dan mengembangkan sesuatu yang baru dalam seri postingan yang aman, gratis, dan terpandu.

Mari kita mulai!

Sekilas Tentang Apa yang Akan Datang

Berikut adalah sekilas desain yang akan kami capai dalam seri ini. Setelah kita meletakkan dasar untuk mereka di posting hari ini, saya akan menunjukkan cara mengedit file single.php (template untuk semua format posting blog kita), dan kemudian bagaimana menata lebih lanjut template itu untuk setiap format dengan CSS. Ini akan menjadi perjalanan yang menyenangkan!

Mempersiapkan Aset Pengembangan Anda

Inilah yang perlu Anda ikuti bersama dengan tutorial hari ini dan tutorial yang saya buat untuk 2 hari ke depan:

• Editor kode seperti Atom, Sublime, Brackets atau Notepad ++ (apa pun yang Anda suka)
• Instalasi WordPress Lokal menggunakan DesktopServer (kecuali Anda sudah memilikinya)
• Tema Anak Divi–yang akan kami buat!

Saya sangat menyarankan bahwa jika Anda akan mengikuti seri ini, Anda melakukannya pada instalasi WordPress yang disiapkan hanya untuk pengujian dan pengembangan. Hal terakhir yang saya inginkan adalah orang-orang bereksperimen dengan situs web langsung mereka dan mengacaukan sesuatu.

Jika Anda tidak yakin bagaimana mengatur instalasi pengembangan lokal WordPress, saya sarankan menggunakan versi gratis dari desktopserver. Seharusnya Anda siap dan berjalan dengan instalasi WordPress lokal hanya dalam beberapa menit (tidak berlebihan).

Menyiapkan DesktopServer di Komputer Anda

Berikut adalah beberapa langkah untuk memulai dengan DesktopServer.

Kunjungi situs web mereka dan unduh Versi Gratis dengan mengklik tombol “Gratis – Tambahkan ke Keranjang” di kolom kanan.

Di halaman checkout, isi informasi pribadi Anda, setujui persyaratan mereka, dan klik beli.

Pada halaman Konfirmasi Pembelian, pilih unduhan yang tepat untuk sistem operasi Anda. Saya sarankan menginstal versi terbaru dari Mac atau Windows.

Buka zip unduhan Anda dan jalankan Instal aplikasi di komputer Anda.

Sekarang Anda dapat menemukan aplikasi DesktopServer di folder bernama "xampplite", di root Drive Disk Lokal (C:) Anda.

Setelah Anda menginstal Desktopserver, baca instruksi mereka untuk membantu Anda memulai dengan menyiapkan instalasi wordpress lokal Anda.

Membuat Tema Anak Divi Anda untuk Seri Ini

Untuk Membuat tema anak Divi, Anda perlu mengakses file tema WordPress Anda. Jika Anda mengikuti default saat menginstal DesktopServer, file tema Anda harus berada di folder dokumen Anda di dalam folder berlabel "Situs Web".

Temukan folder tema, dan tambahkan folder baru bernama "anak".

Sekarang Anda akan menambahkan file style.css Anda ke folder tema anak Anda. Ini adalah yang pertama dari 3 file yang akan membuat tema anak Anda.

Buka editor teks Anda dan buat file baru dengan header CSS berikut di bagian paling atas dokumen.

/*
 Theme Name:     Divi Child
 Theme URI: 
 Description:	   Divi Child Theme
 Author:
 Author URI:   
 Template:       Divi
 Version:        1.0.0
 License:  
 License URI:  
 Tags:  
 Text Domain: 
*/

Anda dapat menambahkan informasi lainnya untuk header CSS tema anak agar sesuai dengan situs Anda sesuai kebutuhan.

Simpan file baru Anda dengan nama dan ekstensi "style.css". Dan tambahkan ke folder tema anak:

File berikutnya yang perlu Anda tambahkan ke folder tema anak Anda adalah file functions.php.

Kembali ke editor teks Anda dan buat file baru lainnya dan tambahkan kode php berikut ke bagian paling atas dokumen:

<?php 
function my_theme_enqueue_styles() {
    $parent_;
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

Simpan file dengan nama dan ekstensi yang tepat "functions.php" dan tambahkan ke folder anak Anda:

File terakhir yang Anda butuhkan untuk tema anak Anda adalah file single.php Divi. Seiring dengan menambahkan CSS baru ke file style.css tema anak Anda, kami akan menggunakan salinan file single.php Divi untuk mengedit tata letak untuk berbagai jenis posting.

Untuk menemukan file single.php, buka folder tema Divi (induk).

Salin file single.php dan tempel ke folder tema anak Anda:

Sekarang kami siap untuk membuat penyesuaian pada file single.php tema anak Anda.

Aktifkan Tema Anak Baru Anda

Sebelum kita mulai menyesuaikan file template single.php, lanjutkan dan aktifkan tema anak baru Anda.

Dari dasbor wordpress, buka Appearance → Themes dan pilih tombol Activate pada child theme baru Anda yang disebut Divi Child.

Itu saja untuk saat ini!

Aku tahu ini belum terlalu menarik, tapi aku harap kamu tetap bersamaku. Penting untuk meletakkan dasar yang tepat untuk proyek Anda dan posting ini adalah tempat yang bagus untuk memulai.

Ada Apa Besok?

Sekarang dengan instalasi lokal WordPress dan tema anak Anda diaktifkan, Anda siap untuk bagian selanjutnya dalam seri ini. Besok saya akan menunjukkan cara mengedit file single.php Divi untuk membuat tata letak yang benar-benar unik untuk format posting blog Anda.

Saya menantikan untuk membaca tanggapan Anda di bawah ini. Menyiapkan tema anak di server lokal dapat menyebabkan beberapa masalah untuk pengatur waktu pertama, jadi saya akan mencoba dan menjawab pertanyaan apa pun yang saya bisa. Namun, jika Anda memiliki lebih banyak masalah teknis, tim dukungan kami juga siap dan bersedia membantu Anda. Belum lagi orang-orang di Desktop Server!

Bersulang!