Membuat Loop WordPress Dan Menyesuaikan CSS

Dengan asumsi Anda telah menyelesaikan Bagian 1, di bagian ini kita akan membuat loop WordPress dan menyesuaikan CSS. Loop WordPress adalah kode PHP yang digunakan oleh WordPress untuk menampilkan konten di situs web Anda. Untuk mengedit loop, Anda harus terbiasa dengan PHP. Jika tidak, ada banyak sumber daya yang tersedia online untuk membantu Anda mempelajari dasar-dasarnya. Ketika Anda memiliki pemahaman dasar tentang PHP, buka editor teks Anda dan buat file baru bernama loop.php. Dalam file ini, kita akan membuat loop WordPress. Hal pertama yang perlu Anda lakukan adalah memberi tahu WordPress untuk memuat file header.php yang kita buat di Bagian 1. Tambahkan kode berikut ke loop.php: Selanjutnya, kita perlu membuat loop WordPress. Loop bertanggung jawab untuk menampilkan semua konten di situs web Anda. Ini dilakukan dengan mengulang semua posting di database WordPress Anda dan menampilkannya di halaman. Untuk membuat loop, tambahkan kode berikut ke loop.php: Kode ini memeriksa untuk melihat apakah ada posting di database WordPress. Jika ada posting, itu akan mengulang masing-masing dan menampilkannya di halaman. Sekarang setelah loop sudah diatur, kita perlu menambahkan beberapa konten di dalamnya. Untuk contoh ini, kita hanya akan menampilkan judul dan isi dari setiap postingan. Tambahkan kode berikut di dalam loop: Kode ini menampilkan judul dan konten setiap posting. Sekarang setelah loop sudah diatur, kita perlu menambahkan beberapa CSS untuk menatanya. Di editor teks Anda, buat file baru bernama style.css. Tambahkan kode berikut ke style.css: .post { margin-bottom: 40px; } Kode ini menambahkan margin ke bagian bawah setiap posting. Ini akan membantu mengecilkan pos di halaman. Sekarang setelah loop dan CSS sudah diatur, kita perlu menambahkan beberapa file lagi ke tema kita. Di editor teks Anda, buat file baru bernama footer.php. Tambahkan kode berikut ke foote

(Bagian 2) Apa yang dilakukan Bootstrap untuk Tema WordPress, dan mengapa itu sangat populer. Tutorial ini adalah bagian kedua dari serangkaian tutorial yang akan memandu Anda melalui proses membuat tema WordPress dari awal dengan framework Bootstrap CSS. Ini adalah bagian ketiga dan terakhir dari diskusi kita tentang membuat area header , navigasi, sidebar, dan area footer. Untuk menandai blog sebagai aktif, tagline dan nama blog sekarang akan ditampilkan di bagian atas halaman. Di area footer, akan ada widget bernama Footer – Copyright Text. Berikut ini adalah beberapa opsi untuk memasukkan bagian ini ke dalam WordPress. Tema WordPress di-widget dengan menambahkan widget tambahan dan Area Widget ke dalamnya.

Untuk memulai fungsi bootstrapstarter_widgets_init(), tambahkan baris berikut ke file footer.php: footer-copyright-text dan sidebar-module-inset. Ada dua bilah sisi di sini: satu dengan latar belakang abu-abu dan yang lainnya dengan latar belakang hitam. Saat pertama kali melihat template starter, latar belakang oranye muncul untuk widget teratas widget (Tentang), dan jika Anda memasukkan judul, itu akan secara otomatis dibungkus dengan tag h4. Menggunakan dynamic_sidebar() kita dapat menampilkan widget yang ditetapkan ke area yang disebut Footer – Teks Hak Cipta. Buat sidebar blog berfitur lengkap menggunakan petunjuk langkah demi langkah dalam tutorial langkah demi langkah ini. File index.php terakhir berisi hasil: Fungsi hasil, yang dapat ditemukan tepat setelah area blog . Ini adalah versi final dari makalah yang dapat diunduh di sini.

Itu juga dilengkapi dengan perbaikan dan penyesuaian CSS untuk bilah navigasi dan bilah sisi. Di halaman ini, Anda mungkin menemukan tautan afiliasi eksternal yang dapat menghasilkan komisi yang dibayarkan ke LyraThemes.com jika Anda menggunakannya. Kami tidak membuat pernyataan atau klaim tentang opini atau ulasan tertulis kami di halaman ini.

Bisakah Kita Menggunakan Tema Bootstrap Di WordPress?

Cara paling sederhana untuk menggunakan Bootstrap di WordPress adalah dengan mengaktifkan tema responsif yang sudah mendukungnya. Dengan Bootstrap, Anda dapat menggunakannya tanpa harus mengunduh atau menginstalnya dari pengembang tema karena kerangka kerja disertakan dalam banyak tema mereka.

Instalasi tema atau plugin tidak sesederhana membuat situs web Bootstrap dengan WordPress. Untuk membuat tema WordPress, Anda harus memiliki akun hosting WordPress. Dengan memanfaatkan Bootstrap sebagai fondasi, WordPress dan Bootstrap dapat bekerja sama. Banyak detail teknis tersembunyi di bawah antarmuka kedua sistem yang mudah digunakan. Anda tidak akan dapat membuat tema WordPress dari awal terlalu sering. Untuk merasakan tema WordPress berbasis Bootstrap, salin beberapa file yang diperlukan dari versi sebelumnya. Tema akan disebut WPBootstrap dan direktori akan diberi nama yang sama (dalam huruf kecil).

Bagaimana saya bisa menambahkan Bootstrap ke tema WordPress? Ada beberapa pilihan. Berikut ini adalah pustaka CSS dan JavaScript Bootstrap yang dapat Anda masukkan ke dalam file header.php dan footer.php. Gambar pratinjau dapat ditambahkan ke tema dengan mengunggahnya ke direktori tema dan kemudian menggunakan file screenshot.png. Banyak pekerjaan untuk membuat tema WordPress, jadi saya sarankan menyalin file dari tema lain. Karena Bootstrap memiliki seperangkat aturan dan praktiknya sendiri, prosedur untuk mempelajarinya juga harus diikuti. Faktanya, baik WordPress dan Bootstrap memiliki komunitas yang bersemangat, jadi Anda tidak pernah tahu apa yang akan terjadi selanjutnya.

Apakah Bootstrap Lebih Baik Dari WordPress?

Jika Anda baru memulai dan tidak tahu banyak tentang desain web, menggunakan Bootstrap adalah ide yang bagus karena mudah dipelajari dan digunakan. Jika Anda ingin meningkatkan keterampilan desain situs web Anda, WordPress mungkin merupakan pilihan yang lebih baik.

Saat mengembangkan situs web, sulit untuk memutuskan antara Bootstrap dan WordPress. Di sini, kita akan membahas perbandingan singkat Bootstrap dan WordPress, serta rincian lengkap masing-masing. Dengan menggunakan metode ini, Anda dapat memutuskan platform yang paling tepat untuk situs web Anda. Situs bootstrap lebih murah untuk dimuat daripada situs WordPress. Situs web yang dibangun dengan Bootstrap dapat diakses dari perangkat apa pun. Situs web WordPress terbaik berfungsi paling baik di layar besar, baik di PC, tablet, atau laptop. Anda harus menjadi seorang programmer untuk dapat melakukan SEO on-page untuk website atau halaman Anda di Bootstrap.

React-Bootstrap adalah library yang menggabungkan kekuatan React dan fleksibilitas Bootstrap. Bootstrap 4 adalah platform yang kuat dengan desain responsif, desain yang konsisten, dan semua fitur yang kurang. Anda tidak akan kesulitan untuk memulai dan menjalankannya karena sangat mudah digunakan dan mudah dipelajari. React-Bootstrap adalah library yang fantastis untuk membuat aplikasi web responsif dan berkualitas tinggi.