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

Membuat Banner 'Percakapan' Dengan Teks Bergulir di WordPress: Bagian 1

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called Create a 'Conversation' Banner With Revolving Text Using a Custom Post Type.
Create a 'Conversation' Banner With Revolving Text in WordPress: Part 2

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

Slider bisa menjadi kontroversial - kita semua memiliki klien yang seringkali mendesak untuk menggunakannya terlepas dari apakah mereka meningkatkan situs atau tidak.  Tapi mereka tetap memiliki tempat di dalam sebuah situs.  Mereka dapat membantu menyorot konten utama, menampilkan gambar di situs dimana elemen visual penting, dan menghidupkan situs.

Dalam kebanyakan kasus, Anda mungkin telah menggunakan slider untuk menampilkan gambar, yang mungkin atau mungkin tidak terkait dengan konten di situs Anda.  Tapi Anda juga bisa menggunakan slider untuk menampilkan teks di situs Anda.

Dalam rangkaian dua tutorial ini, saya akan menunjukkan cara membuat slider teks dengan efek yang menarik: ia akan menggunakan jenis tulisan khusus untuk menarik satu demi satu potong teks dalam dua blok, menciptakan efek percakapan di bagian atas halaman.  Ini akan dilapisi dengan foto dua orang, sehingga efeknya adalah keduanya seperti saling berbicara.

Apa yang akan kamu butuhkan

Untuk mengikuti, Anda memerlukan:

  • instalasi pengembangan WordPress
  • editor kode
  • Tema Responsive gratis yang telah terpasang

Contoh yang akan saya tangani adalah situs dunia nyata yang sedang saya kembangkan untuk klien, yang menjalankan tema turunan dari tema Responsive.  Saya akan membuat anak dari tema Responsive dan menambahkan styling kustom untuk itu dan juga fungsi pada file functions.php tema.  Anda bisa menambahkan ini ke tema Anda sendiri atau membuat tema turunan dari Responsive seperti saya.

Dalam tutorial ini, kita akan mengatur dan menjalankan slider menggunakan tipe post custom.  Secara khusus kita akan:

  • membuat tema anak untuk tema Responsive
  • mendaftarkan jenis posting kustom
  • membuat posting menggunakan jenis posting kustom kita
  • memasang dan mebuat sebuah plugin untuk menampilkan slider teks
  • menambahkan slider kita ke header situs menggunakan action hook

Pada bagian selanjutnya, kita akan menambahkan CSS ke tema kita untuk memposisikan teks dengan benar, menciptakan efek percakapan, dan menatanya.

Jadi mari kita mulai!

Membuat Tema Turunan

Pertama mari kita ciptakan tema turunan dari tema Responsive.  Saya melakukan ini karena saya tidak ingin mengedit tema Responsive itu sendiri: jika Anda melakukan itu, Anda akan kehilangan pekerjaan saat memperbarui tema berikutnya.  Sebagai alternatif, Anda bisa membuat plugin untuk melakukan ini.

Di direktori wp-content/themes Anda, buat folder kosong yang baru.  Saya memanggil milik saya tutsplus-conversation-banner.

Di folder itu, buat sebuah file bernama style.css dan tambahkan ini ke dalamnya:

Edit kode di atas dan ubah diri anda menjadi pengarang dan tambahkan URI anda sendiri.

Sekarang simpan file itu dan aktifkan tema baru Anda.

Tambahkan Styling Kustom

Karena ini adalah situs dunia nyata, saya telah menambahkan styling kustom, yang ada di stylesheet tema turunan itu.  Saya tidak akan membahasnya secara rinci karena berada di luar cakupan tutorial, namun Anda dapat melihat styling dalam paket kode dengan tutorial ini.

Begini situs saya terlihat sebelum menambahkan slider:

site with header image before slider added

Gambar di header memiliki spasi di kedua sisi kedua orang itu, dan saya akan memberi gaya pada slider saya sehingga menampilkan teks di sisi kanan orang, memberi efek bahwa mereka menunjukkan kata-kata mereka.

Mendaftarkan Post Type

Langkah selanjutnya adalah mendaftarkan tipe postingan yang disebut quote.  Di folder tema turunan Anda, buat file baru yang disebut functions.php.

Catatan: Ini adalah praktik yang baik untuk menggunakan plugin untuk mendaftarkan jenis posting daripada menambahkannya ke file fungsi tema Anda.  Saya menggunakan file fungsi di sini untuk menyimpan semuanya di satu tempat, jadi Anda memiliki berkas kode untuk diunduh. 

Buka file functions Anda dan tambahkan kode ini ke dalamnya:

Ini mendaftarkan jenis posting baru yang disebut quote.

Anda dapat melihat jenis pos baru di situs saya, dengan beberapa kutipan yang telah saya tambahkan:

A listing of custom post types

Perhatikan bahwa ini hanya kutipan secara dummy - fakta bahwa saya telah menggunakan jenis posting kustom memudahkan klien saya untuk menambahkan kutipan mereka sendiri begitu situs diluncurkan.  Masing-masing hanya memiliki judul posting dan tidak ada konten, karena jika ada konten posting, plugin akan menampilkan keduanya.

Memasang dan Mengkonfigurasi Plugin Slider

Langkah selanjutnya adalah memasang dan mengkonfigurasi plugin slider.  Saya menggunakan plugin Smooth Slider, yang memungkinkan Anda memilih pos mana yang akan ditambahkan ke slider dan menyusun ulang posting Anda secara manual di layar pengaturan slider.

Pergi ke Smooth Slider> Settings dan konfigurasikan seperti ini:

  • Teks judul default: kosongkan ini.
  • Gambar thumbnail: hapus centang semua kotak untuk ini.
  • Konten slider - Pilih konten dari: pilih Konten.

Saya menambahkan styling di stylesheet saya karena saya ingin menggunakan font Google, jadi saya tidak terlalu khawatir dengan pengaturan font, namun Anda mungkin lebih memilih untuk men-tweaknya di layar pengaturan.

Mengatur Sliders

Langkah selanjutnya adalah menambahkan slider dan mengisi mereka dengan tulisan.

Buat Slider

Kita perlu menambahkan dua slider: satu untuk masing-masing dua orang.  Pergi ke Smooth Slider> Sliders dan klik Create New Slider.  Saya telah memanggil dua slider tersebut dengan 'Heide' dan 'Iain' karena itu adalah nama kedua orang tersebut.

Smooth slider - sliders added

Tambahkan Tulisan ke Slider

Anda menambahkan tulisan ke slider dari halaman edit posting.  Buka salah satu posting Anda dan gulir ke bawah untuk melihat opsi untuk menambahkannya ke slider:

Smooth slider - adding a post to the slider

Pilih slider yang ingin Anda tambahkan ke pos dan simpan.  Ulangi ini untuk setiap posting, tambahkan ke slider yang relevan.

Mengatur urutan Posts di slider

Anda dapat secara manual mengedit urutan posting yang akan ditunjukkan oleh slider.  Pergi ke Smooth Slider> Sliders dan pilih slider yang ingin Anda gunakan.  Inilah slider 'Heide' saya:

Configuring a slider

Scroll ke bawah untuk menarik pos ke urutan yang benar:

Viewing the slides in the proper order

Setelah berhasil melakukannya, simpan slider.

Tambahkan Slider ke Page Header

Sekarang kita memiliki dua slider, tapi tidak muncul di situs ini.  Plugin ini memberi Anda shortcode yang bisa Anda gunakan untuk menambahkan slider ke situs Anda: seperti yang akan kita tambahkan di file tema, kita akan menggunakan fungsi do_shortcode().

Tema Responsive memberi kita sebuah hook yang disebut responsive_in_header yang memungkinkan Anda menambahkan kode ke header halaman.  Ini akan ditampilkan di atas gambar tapi di header: kita akan menambahkan CSS ke posisi slider dengan benar di bagian selanjutnya dari tutorial dua bagian ini.

Buka file functions.php tema Anda dan tambahkan fungsi ini:

Ini menciptakan div dengan kelas tutsplus-sliders, yang akan kita targetkan untuk diposisikan nanti, dan menggunakan shortcode untuk menampilkan dua slider.

Simpan file fungsi anda

Situs Anda sekarang terlihat seperti ini:

sliders displayed at top of header above image

Jadi slider ada di sana, dan mereka bekerja.  Tapi mereka mengambil sejumlah besar ruang putih di bagian atas halaman, di atas gambar itu.  Kita membutuhkan mereka untuk ditampilkan di atas gambar, di samping kedua orang itu. 

Pada bagian selanjutnya, kita akan memperbaikinya.  Kita akan menambahkan CSS untuk memposisikan dua slider, dan juga untuk styling.  Kita akan mendaftarkan font Google yang akan digunakan untuk quotes.

Ringkasan

Slider tidak hanya untuk gambar: Anda juga bisa menggunakannya untuk menampilkan teks.  Dalam tutorial ini, Anda telah belajar cara mengatur dua slider menggunakan jenis posting kustom.  Selanjutnya kita akan menambahkan styling untuk membuat teks kita terlihat seperti seharusnya.

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.