Cara menggunakan pasangan bata untuk menambahkan Pinterest Posting Gaya Grid di WordPress
Ini adalah posting tamu oleh Josh Pollock
Pinterest Post Grid Views telah populer dirancang untuk halaman indeks blog WordPress untuk sementara waktu sekarang. Ini populer tidak hanya karena meniru tampilan dan nuansa situs media sosial populer, tetapi juga karena memanfaatkan ruang layar dengan sebaik-baiknya. Dalam indeks blog WordPress, ini memungkinkan pratinjau setiap posting memiliki ukuran alami, tanpa meninggalkan ruang ekstra.
Dalam tutorial ini, saya akan menunjukkan cara menggunakan Pustaka JavaScript Masonry yang populer untuk membuat tata letak kotak berjenjang untuk indeks blog Anda serta halaman arsip untuk tema Anda. Saya akan mengatasi beberapa masalah yang perlu Anda ingat untuk pengoptimalan seluler dan cara mengatasinya.
Catatan: Ini adalah tutorial tingkat lanjut bagi mereka yang nyaman mengedit tema WordPress dan memiliki pengetahuan HTML/CSS yang cukup.
Dia lulus 1: Tambahkan perpustakaan yang diperlukan ke tema Anda
Memperbarui: WordPress 3.9 sekarang menyertakan versi terbaru dari Masonry.
Pertama, Anda harus memuat Masonry ke dalam tema Anda, menggunakan kode ini:
if (! function_exists('slug_scripts_masonry') ) :
if ( ! is_admin() ) :
function slug_scripts_masonry() {
wp_enqueue_script('masonry');
wp_enqueue_style('masonry’, get_template_directory_uri().'/css/’);
}
add_action( 'wp_enqueue_scripts', 'slug_scripts_masonry' );
endif; //! is_admin()
endif; //! slug_scripts_masonry exists
Kode ini hanya memuat batu bata dan membuatnya tersedia untuk file template tema Anda (lihat panduan kami tentang cara menambahkan JavaScript dan Gaya di WordPress). Perhatikan juga bahwa kami juga tidak menambahkan jQuery sebagai ketergantungan untuk apa pun. Salah satu keunggulan Masonry 3 adalah tidak memerlukan jQuery, tetapi dapat digunakan dengannya. Dalam pengalaman saya, menginisialisasi Masonry tanpa jQuery lebih andal dan membuka kemungkinan untuk melewati pemuatan jQuery, yang dapat membantu dengan waktu buka halaman dan masalah kompatibilitas.
Dia lulus 2: inisialisasi Javascript
Fungsi berikut mengonfigurasi Masonry, mengidentifikasi wadah yang digunakan dengannya, dan juga memastikan bahwa semuanya terjadi dalam urutan yang benar. Masonry perlu menghitung ukuran setiap elemen pada halaman untuk mendesain kisi-kisinya secara otomatis. Satu masalah yang saya miliki dengan Masonry di banyak browser adalah bahwa Masonry akan salah menghitung tinggi elemen dengan pemuatan gambar yang lambat yang akan menyebabkan elemen tumpang tindih. Solusinya adalah menggunakan imageLoaded untuk mencegah Masonry menghitung tata letak hingga semua gambar dimuat. Ini memastikan ukuran yang tepat.
Ini adalah fungsi dan tindakan yang akan dihasilkan skrip inisialisasi di footer:
if (! function_exists ('slug_masonry_init')):
función slug_masonry_init () {?>
php}
// agregar a wp_footer
add_action ('wp_footer', 'slug_masonry_init');
terminara si; //! slug_masonry_init existe
Fitur ini dijelaskan langkah demi langkah dengan komentar online. Apa yang dilakukan fungsi Javascript adalah memberi tahu Masonry untuk melihat ke dalam wadah dengan id “masonry-loop” untuk mencari item dengan kelas “masonry-entry” dan menghitung grid hanya setelah gambar dimuat. Kami mengonfigurasi wadah luar dengan querySelector dan wadah dalam dengan itemSelector.
Dia lulus 2: Buat Loop Masonry
Daripada menambahkan markup HTML untuk Masonry langsung ke template, buat bagian template terpisah untuknya. Buat file baru bernama “content-masonry.php” dan tambahkan ke tema Anda. Ini akan memungkinkan Anda untuk menambahkan lingkaran pasangan bata ke sebanyak mungkin pola yang berbeda yang Anda suka.
Di file baru Anda, Anda akan menambahkan kode yang ditunjukkan di bawah ini. Markup mirip dengan apa yang biasanya Anda lihat untuk pratinjau konten apa pun. Anda dapat memodifikasinya dengan cara apa pun yang Anda butuhkan, pastikan elemen terluar memiliki kelas “entri batu” yang kami tetapkan sebagai itemSelector pada langkah terakhir.
> " title="">
Markup ini memiliki kelas untuk setiap bagiannya, sehingga Anda dapat menambahkan markup agar sesuai dengan tema Anda. Saya ingin menambahkan batas yang bagus dan sedikit membulat ke entri .masonry saya. Pilihan bagus lainnya adalah tidak memiliki batas untuk entri .masonry, tetapi memberikannya sedikit bayangan. Itu terlihat sangat bagus ketika gambar mini posting meluas ke tepi wadah, yang dapat dilakukan dengan memberikan margin gambar mini batu dan pengisian nol ke segala arah. Anda perlu menambahkan semua gaya ini dalam file bernama masonry.css di folder css tema Anda.
Dia melewati 3: Menambahkan loop pasangan bata ke pola
Sekarang kami memiliki bagian template, Anda dapat menggunakannya di template apa pun di tema yang Anda inginkan. Anda dapat menambahkannya ke index.php, tetapi tidak ke category.php jika Anda tidak ingin itu digunakan untuk file kategori. Jika Anda hanya ingin menggunakannya di beranda tema Anda, ketika sudah diatur untuk menampilkan posting blog, Anda akan menggunakannya di home.php. Di mana pun Anda memilih, yang perlu Anda lakukan hanyalah membungkus loop Anda dalam wadah dengan id “masonry-loop” dan menambahkan bagian template ke loop menggunakan get_template_part(). Pastikan untuk memulai pembungkus loop sebelum while (have_posts()).
Sebagai contoh, berikut adalah loop utama dari dua puluh tiga index.php:
Dan ini dimodifikasi untuk menggunakan loop pasangan bata kami:
Dia melewati 4: Tetapkan lebar responsif elemen blok
Ada beberapa cara untuk mengatur lebar setiap item build. Anda dapat mengatur lebar menggunakan beberapa piksel saat menginisialisasi pasangan bata. Saya bukan penggemar melakukan itu karena saya menggunakan tema responsif dan memerlukan beberapa kueri media yang rumit untuk melakukannya dengan benar di layar kecil. Untuk tata letak responsif, saya menemukan bahwa hal terbaik yang harus dilakukan adalah menyetel nilai lebar untuk entri .masonry dengan persentase, berdasarkan berapa banyak entri yang Anda inginkan dalam satu baris, dan biarkan Masonry melakukan sisanya. matematika untukmu.
Yang diperlukan hanyalah membagi 100 dengan jumlah elemen yang ingin Anda persentasekan menjadi entri sederhana di style.css tema Anda. Misalnya, jika Anda menginginkan empat item di setiap baris, Anda dapat melakukannya di file masonry.css Anda:
.masonry-entry {lebar: 25%}
Dia lulus 5: optimalkan telepon
Kita bisa berhenti di sini, tapi menurut saya hasil akhirnya tidak bekerja dengan baik di layar ponsel kecil. Setelah Anda puas dengan tampilan dan nuansa tema kotak batu baru di desktop Anda, ujilah di ponsel Anda. Jika Anda tidak puas dengan tampilan dan nuansa ponsel Anda, Anda perlu melakukan sedikit usaha.
Saya rasa tidak ada cukup ruang di layar ponsel untuk semua yang kami tambahkan ke sepotong template pasangan bata konten. Dua solusi bagus yang tersedia untuk Anda adalah mempersingkat perintah telepon atau melewatkannya sama sekali. Ini adalah fungsi tambahan yang dapat Anda tambahkan ke fungsi theme.php Anda untuk melakukannya. Karena menurut saya ini bukan masalah pada tablet, saya menggunakan plugin Mobble yang bagus di semua contoh di bagian ini untuk membuat perubahan hanya pada ponsel, bukan tablet. Saya juga memeriksa apakah Mobble aktif dan berjalan sebelum menggunakannya, dan jika perlu, berdasarkan deteksi seluler wp_is_mobile yang lebih umum, yang ada di WordPress.
if (! function_exists('slug_custom_excerpt_length') ) :
function slug_custom_excerpt_length( $length ) {
//set the shorter length once
$short = 10;
//set long length once
$long = 55;
//if we can only set short excerpt for phones, else short for all mobile devices
if (function_exists( 'is_phone') {
if ( is_phone() ) {
return $short;
}
else {
return $long;
}
}
else {
if ( wp_is_mobile() ) {
return $short;
}
else {
return $long;
}
}
}
add_filter( 'excerpt_length', 'slug_custom_excerpt_length', 999 );
endif; // ! slug_custom_excerpt_length exists
Seperti yang Anda lihat, kami mulai dengan menyimpan panjang ekstrak panjang dan panjang ekstrak pendek dalam variabel, karena kami akan menggunakan nilai-nilai itu dua kali dan ingin dapat mengubahnya dari satu tempat jika diperlukan nanti. Dari sana, kami memeriksa apakah kami dapat menggunakan is_phone() Mobble. Jika demikian, kami menetapkan perintah pendek untuk telepon dan pernyataan panjang sebaliknya. Kemudian kita melakukan hal dasar yang sama, tetapi menggunakan wp_is_mobile, ini akan mempengaruhi semua perangkat seluler, jika is_phone() tidak dapat digunakan. Semoga bagian lain dari fitur ini tidak pernah digunakan, tetapi alangkah baiknya jika Anda memiliki cadangan untuk berjaga-jaga. Setelah logika panjang ekstrak diatur, ini menghubungkan fungsi ke filter excerpt_length.
Memperpendek ekstraksi adalah pilihan, tetapi kita juga dapat menghilangkannya sepenuhnya dengan proses yang sederhana. Ini adalah versi baru dari konten batu, dengan seluruh kutipan dihilangkan di telepon:
> "tiêu đề ="">
"tiêu đề ="">
