Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress

Membangun Fitur Posting Bagian untuk WordPress

by
Difficulty:BeginnerLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Primrose (you can also view the original English article)

WordPress mengagumkan. Bahkan lebih luar biasa adalah kenyataan bahwa hal ini dapat disesuaikan untuk semua jenis situs yang Anda suka! Di sini, kita akan belajar bagaimana membuat Terpilih dan "Pemesanan posting" bagian - mudah 'must-have' untuk semua tema majalah/berita yang baik. Kami juga akan pergi ke menggunakan 'Custom Fields' potensi penuh.

Pengenalan

Tutorial ini membahas proses menciptakan halaman indeks majalah berita tema untuk WordPress. Fitur utama dari Halaman ini akan:

  • Feature posting.
  • Posting terbaru.
  • Menggunakan variabel PHP untuk kustomisasi mudah di atas untuk pengguna Anda tidak akrab dengan PHP WordPress tema.
  • Mengambil sebuah posting gambar dari bagian 'Custom Fields' posting.

Langkah 1 - persiapan

Dari direktori instalasi WordPress Anda, telusuri 'wp-content/themes' dan membuat folder baru. Nama itu bagaimana Anda ingin (saya menggunakan 'WordPress kali'). Selanjutnya, membuat file baru 5:

  • index.php
  • header.php
  • footer.php
  • style.CSS

Ini adalah layout dasar kita akan pergi untuk:

Jadi 940px dokumen, dengan dua bagian:
Konten di 600px & Sidebar di 300px-meninggalkan 40px margin antara dua.

Langkah 2 - Header

Buka header.php file, dan masukkan berikut ini:

Menjalankan melalui ini, kita pertama menentukan DOCType sebagai XHTML 1.0 Transitional. Di bagian kepala kami kemudian menetapkan semua meta tag, judul halaman dan stylesheet akan diambil dari WordPress; dan kami menyertakan file JavaScript kita 3.
Akhirnya, kami membuka Divisi 'wadah', dan masukkan nama blog kami sebagai judul header.

Langkah 3 - Posts 'Berita'

Kami akan termasuk ditetapkan pengguna jumlah posting 'Breaking News' Kategori di bagian atas halaman kami. Buka index.php dan ketik berikut ini, jangan khawatir, saya akan menjelaskan itu semua di bawah ini:

3.1 - pembukaan

Baris pertama adalah fungsi WordPress PHP sederhana untuk menyertakan file header.php kami pertama. Di bawah itu, kami membuka div kami 'Isi' untuk membungkus semua posting bersama-sama. Saya telah menyertakan komentar HTML pada penutupan setiap div tag div yang menyatakan mereka akan menutup. Saya sangat merekomendasikan bahwa Anda mulai melakukan hal ini dalam proyek Anda sendiri jika Anda tidak sudah, karena membantu menjaga kode Anda yang diselenggarakan mungkin.

3.2 - $more tag

Kode ini memungkinkan kita untuk hanya menyertakan bagian dari setiap posting ke mana penulis sudah termasuk <--more--> tag – hal ini akan menghentikan semua teks panjang Posts dari menampilkan pada homepage.

3.3 - id Kategori

Untuk membuat menyesuaikan tema lebih mudah, kami menyertakan pilihan di sini. Setiap jalur adalah berkomentar kepada lebih lanjut. Kita melakukan ini sehingga jika orang lain menggunakan tema Anda - tanpa merangkak melalui semua kode Anda untuk menemukan tempat untuk meletakkan kategori mereka ID - mereka semua mudah diakses di bagian atas dari file. Selama tutorial ini, kita akan menggunakan variabel ini dalam lingkaran WordPress.

3.4 - kita memiliki posting?

Ini adalah variasi dari loop WordPress yang output kami posting dari database. Seperti yang Anda lihat, kami menggunakan yang pertama dua variabel kami dari bagian di atas. Variabel pengganti diri dengan string yang terkait dengan mereka. Misalnya, menggunakan kode standar, garis akan secara otomatis menjadi:

Baris kedua kemudian berkata, jika kita memiliki posting kemudian memasukkan mereka ke dalam halaman dalam format yang diuraikan di bawah ini.

3.5 - posting konten

Ini bukan sebagai scary seperti kelihatannya, percayalah.

  • Gambar - pada pratinjau situs kami, Anda akan melihat bahwa setiap post memiliki gambar sendiri. Ini termasuk menggunakan WordPress' "Custom Fields" bagian ketika menulis posting. Cukup set 'kunci' untuk thumbnail kemudian masukkan link ke gambar:

    Kode pada dasarnya mengatakan "Mengambil data dari bidang kustom post bernama 'thumbnail' dan menempelkannya ke tag img."

  • Title - ini menyisipkan judul posting kami sebagai link di antara h2 tag. the_permalink() mendapatkan link posting, dan the_title() mengambil judul. Cukup sederhana, ya?
  • Tanggal & waktu - di sini, kita mendapatkan waktu pos ini dibuat, dalam format: l, F j, Y G:i- atau dalam bahasa Inggris: tahun hari, tanggal, waktu (misalnya. Sabtu, Agustus 2, 2008 14:27).
  • Konten - mengambil posting dan konten tambahan (thanks ke kode kita termasuk sebelumnya). 'Lanjutkan...' adalah teks yang ditampilkan pada akhir posting. Menyesuaikan ini seperti yang Anda sukai.

3.6 - posting Meta

Ini mengambil kategori (s) adalah pos dari. Jika ada lebih dari satu, mereka akan dipisahkan dengan koma. Link ke bagian komentar, dan jumlah komentar di artikel kemudian diakses.

Ini hanya menutup "div.breaking" yang kami posting di; dan kemudian menutup loop setelah selesai.

Langkah 4 - posting terbaru

Di bawah 'Breaking News' posting kami tiga, kita akan mencakup ditentukan pengguna jumlah posting terbaru, sementara mengabaikan setiap posting dari kategori 'Melanggar', dan salah satu lainnya ditentukan pengguna kategori untuk mengabaikan. Kami akan menambahkan berikut ke bagian bawah kode kita saat ini:

4.1 - Loop

  • showposts ='. $latest_num.'-memberitahu lingkaran untuk hanya menampilkan jumlah posting terbaru yang telah ditentukan oleh pengguna dalam variabel '$latest_num'.
  • kucing =-'. $breaking_cat. ','. $latest_ignore.'-ini memerintahkan loop untuk mengabaikan (Perhatikan simbol 'minus' kami mengharuskan pengguna untuk menggunakan variabel) posting di 'Melanggar' Kategori sehingga tidak untuk menduplikasi posting; dan juga untuk mengabaikan posting dari salah satu kategori yang menentukan pengguna dalam variabel '$latest_ignore'.

Sisanya cukup jelas dan sama seperti fitur Breaking News. Beberapa perbedaan adalah kurangnya bagian 'isi' dari setiap posting, dan juga posting gambar diberikan kelas 'postimg-s' sebaliknya. Ini akan memungkinkan kita untuk hanya memerlukan satu gambar thumbnail-yang kita akan kemudian ukuran turun kami CSS dari 200 x 200 sampai 50 x 50.

4.2 - menutup halaman

Untuk mengakhiri halaman saat ini, kita perlu menutup div #content dan termasuk footer kami:

4.3 - Footer.php

Dalam file ini, hanya menutup #container, tubuh dan html tag:

Langkah 5 - style CSS

Sekarang, jika Anda membuat beberapa posting, desain Anda harus melihat sesuatu seperti ini:

Cukup jelek, eh? Juga tidak untuk lebih lama lagi.

5.1 - kebutuhan

Membuka file style.css Anda dan paste kode berikut:

Hal ini diperlukan di bagian atas dari file ini, karena manajer Theme di WordPress memberikan beberapa informasi tentang tema Anda. Isi di bagian di dalamnya yang Anda inginkan.

5.2 - styling

Berikut adalah semua kode CSS yang digunakan untuk styling dokumen. Didokumentasikan di bawah ini.

5.3 - memeriksa CSS

  • * - Menghapus un dicari marjin dan paddings dari semua elemen bahwa browser memasukkan diri.
  • tubuh - halaman dasar styling warna dan font.
  • #container - mengatur lebar halaman ke 940px. margin 15px di atas & bawah, dan pusat-pusat di jendela.
  • H1, h2, h3, h4, h5, h6 - font menuju ke Georgia, Times New Roman, kali atau setiap font serif.
  • Antara Blueprint komentar Tag - dasar tipografi styling dari kerangka CSS cetak biru. Menyimpan banyak kerumitan dengan mendapatkan teks untuk terlihat bagus.
  • H1 #header - menambahkan sedikit pemisahan dari nama Blog, dan seluruh dokumen.
  • #content - semua konten kami dibungkus dalam 600px di sebelah kiri. Ruang yang tersisa dapat digunakan sebagai sidebar.
  • .Breaking, .recent - termasuk melanggar dan Recent posts dalam sebuah kotak dengan 10px padding. 15px kesenjangan antara masing-masing.
  • .postimg - format gambar Post untuk melanggar artikel. Ukuran gambar terbatas 200px dan melayang tepat.
  • .postimg-s - sama seperti di atas, tetapi untuk artikel terbaru dan gambar yang diubah ukurannya ke 50px.
  • .Breaking h2 - membuat judul melanggar artikel yang lebih kecil, dengan tidak ada margin bawah.
  • .Breaking h2, h3 .recent a - dasar styling untuk judul artikel, menyembunyikan gaya link standar.
  • .Breaking h2: hover, .recent h3: hover - menambah menggarisbawahi link judul ketika berdiri lebih dari untuk menunjukkan pengguna adalah dalam kenyataannya link.
  • p.datetime - string tanggal & waktu untuk artikel yang membuat sedikit lebih kecil, dan dalam huruf miring.
  • .postmeta - membuat kotak untuk sertakan rincian posting Meta (Kategori & komentar). margin - 10px memastikan ini mengisi seluruh kotak pos.
  • .postmeta p - teks dalam postmeta div dibuat huruf besar dan berani.
  • .postmeta span.comm - menghapus berani styling untuk teks "x komentar".
  • .postmeta a - Link styling untuk menghilangkan warna link default.
  • .postmeta: hover - menambah menggarisbawahi link di hover.
  • #sidebar - menciptakan area untuk sidebar di sisi kanan halaman.

Halaman sekarang akan terlihat seperti ini. Pembersih banyak!

Kesimpulan

Congrats. Anda telah berhasil menciptakan dasar untuk halaman depan berita tema untuk WordPress, lengkap dengan area posting Feature-'must-have' ketika datang ke tema berita. Anda juga dapat tetap terdepan dalam persaingan dengan pilihan kustomisasi mudah menggunakan variabel PHP.

Melihat keluar untuk peluncuran vivaWP-keluarga baru Premium WordPress Tema datang pertengahan Agustus. Tema pertama kami, CocoaNews, berbagi beberapa kode dasar yang ditunjukkan selama tutorial ini.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.