Beranda » WordPress » Optimasi Kecepatan WordPress dengan Ikon Berbagi Sosial Kustom
Optimasi Kecepatan WordPress dengan Ikon Berbagi Sosial Kustom
Ini mungkin tampaknya menjadi tugas yang mudah tetapi menambahkan tombol berbagi sosial yang berperilaku baik ke situs WordPress dapat merepotkan. Ketika saya mengatakan berperilaku baik, saya maksudkan sederhana, ringan, ramah sumber daya, cepat - sebagian besar plugin berbagi sosial di luar sana tidak seperti itu. Mereka cenderung memakan sumber daya seperti orang gila, dan mengapa ada orang yang ingin meningkatkan waktu muat plugin sebesar 25-35% hanya untuk menampilkan beberapa ikon di situs mereka?
Berita baiknya adalah Anda tidak perlu plugin untuk menyelesaikan tugas ini. Dalam tutorial ini, saya akan menunjukkan kepada Anda bagaimana Anda dapat dengan mudah tambahkan tombol berbagi sosial khusus ke akhir posting di situs WordPress Anda dengan hanya beberapa baris kode.
Langkah 1: Hasilkan Tombol Berbagi Sosial
Kami akan menggunakan Generator Tombol Berbagi Sederhana, alat web yang praktis dan mudah digunakan untuk menghasilkan ikon berbagi. Keuntungan utama dari aplikasi ini adalah bahwa tombol yang dihasilkan dijalankan di frontend mereka tidak akan membebani server Anda dan Anda juga dapat merahasiakan aktivitas pengguna Anda.
Untuk menghasilkan tombol kustom Anda, buka di sini dan tekan Mulai. Pilih 1 dari 6 gaya tombol yang berbeda. Klik berikutnya dan centang jaringan sosial Anda ingin menambahkan ke situs Anda. Setelah selesai, Anda harus mengisi info situs web Anda.
Di layar ini (di bawah), Anda akan menemukan dua opsi: 'Tidak Ada JavaScript' dan 'JavaScript'. Kutu JavaScript, karena itu akan memungkinkan browser untuk mendeteksi URL secara dinamis sehingga pengunjung Anda akan dapat berbagi setiap posting secara individual, tidak hanya URL halaman beranda.
Terakhir, lihat pratinjau langsung, unduh ikon yang dipilih, dan ambil kode yang Anda buat.
Langkah 2: Buat Tema Anak
Sekarang Anda harus menambahkan ikon dan kode yang dihasilkan ke situs Anda. Pertama-tama Anda harus membuat tema anak.
Anda dapat dengan mudah membuat tema WP child dengan bantuan tutorial kami, atau Anda dapat mengikuti langkah-langkah artikel WP Codex ini. Jika sudah punya, Anda bisa langsung ke Langkah 3.
Tema anak terkait dengan tema yang saat ini Anda gunakan - dengan cara yang agak mirip dengan anak yang berhubungan dengan orang tuanya. Saya t mewarisi segalanya (gaya dan fungsionalitas) dari tema induk tapi kamu bisa tambahkan fungsionalitas tambahan untuk itu.
Dalam kasus kami, fungsionalitas tambahan akan menjadi tombol berbagi sosial khusus.
Langkah 3: Buat Fungsi Kustom yang Menampilkan Ikon
Kami akan menambahkan fungsi kustom ke file functions.php tema anak.
Dengan bantuan fungsi ini, Anda dapat menambahkan ikon sosial di mana pun Anda inginkan di situs Anda dengan menggunakan kait tindakan khusus. Jika tema anak Anda belum memiliki file functions.php, buat file teks kosong di folder root tema anak Anda dengan fungsi nama, dan ubah ekstensinya menjadi .php.
Masukkan baris kode berikut ke file kosong ini:
Kapan Anda functions.php file diatur tambahkan potongan kode berikut untuk itu:
/ * * Menambahkan ikon berbagi sosial khusus * / function add_social_sharing () ?
Bagikan pos ini
Akhirnya hapus baris komentar HTML dari cuplikan kode di atas dan ganti dengan kode HTML Anda dihasilkan pada Langkah 1 dengan Generator Tombol Berbagi Sosial.
Langkah 4: Salin File Templat yang Sesuai ke Folder Tema Anak
Secara default, posting tunggal diperintah oleh file template yang disebut single.php. Terkadang - terutama dalam tema yang lebih modern - struktur single.php lebih rumit, karena juga memuat file template tambahan. Pada langkah ini kita perlu menemukan file templat yang sesuai di mana kita dapat menambahkan ikon nanti.
Untuk menemukan tempat yang tepat untuk tombol sosial kita perlu menemukan file template itu berisi fungsi yang memuat konten posting tunggal.
Mari kita buka editor tema di dasbor admin WordPress di bawah Penampilan> Editor. Di sudut kanan atas Anda menemukan daftar dropdown di mana Anda dapat memilih tema orang tua Anda. Di bawah dropdown Anda dapat melihat semua file template yang berisi tema orang tua Anda. Gulir ke bawah sampai Anda menemukan Templat Posting Tunggal (disebut single.php) dan buka.
Jika tema induk menggunakan get_template_part () Fungsi WP dalam single.php File itu berarti menggunakan file template tambahan untuk memuat konten dari posting tunggal.
Pertama, Anda harus mencari tahu yang mana ini. Nama file templat tambahan adalah parameter pertama dari get_template_part () fungsi.
Parameter pertama adalah 'konten' yang berarti kita mencari file templat yang disebut content.php. Anda perlu menyalin file ini dari folder root tema induk ke folder root tema anak untuk memodifikasinya.
Langkah 5: Tambahkan Kait Tindakan ke File Templat Kanan
Kami menciptakan fungsi yang disebut add_social_sharing () pada Langkah 3, dan kami lampirkan ke kait tindakan kustom yang disebut custom_social_share. Sekarang kita harus menambahkan kait ini ke tempat di mana kita ingin fungsi dijalankan.
Berikut ini cuplikan kode yang harus Anda masukkan ke tempat yang tepat:
Selanjutnya, mari cari tempat yang tepat.
Buka file template yang Anda tambahkan ke tema anak Anda di Langkah 4 di editor kode atau di dalam editor tema dashboard admin WordPress, dan cari the_content () fungsi.
Periksa apakah ada wp_link_pages () berfungsi tepat setelah the_content () fungsi. Jika ada, maka potongan kode di atas muncul setelah itu; selain itu mengikuti the_content () fungsi.
Langkah 6: Tambahkan Kode CSS ke Tema Anak
Buka style.css file tema anak Anda baik di editor kode Anda atau di editor tema dashboard admin WordPress, salin kode CSS yang Anda buat pada Langkah 1, tempel ke bagian akhir file, dan simpan.
Kami akan menambahkan dua baris tambahan ke file CSS untuk membuat ikon berbagi sosial ditampilkan dengan benar di setiap tema. Salin dan tempel cuplikan kode berikut ke akhir style.css mengajukan:
ul.share-buttons seperti border: 0; ul.share-buttons li img display: inline;
Langkah 7: Unggah Ikon Media Sosial yang Diatur ke Server
Unggah ikon media sosial yang dipilih agar Anda unduh pada Langkah 1 ke folder tema anak Anda. Hubungkan server Anda melalui FTP, buat folder baru bernama gambar di dalam root folder tema anak Anda (/ wp-content / themes / your-child-theme / images) dan unggah ikon yang ditetapkan di sini.
Kami beri nama folder tersebut gambar karena ini adalah nama default folder gambar yang digunakan Simple Sharing Buttons Generator.
Langkah 8: Periksa Jalur File Ikon
Setelah Anda mengunggah ikon media sosial ke server Anda di Langkah 7, penting untuk memeriksa jalur file ikon untuk memastikan mereka akan dimuat.
Jalur file gambar memberikan petunjuk kepada browser tentang lokasinya di server. Mari kita periksa jalur gambar di dalam functions.php file tema anak. Buka file di editor kode Anda, dan arahkan ke menu add_social_sharing () fungsi di mana Anda perlu memeriksa kode HTML yang Anda buat dengan Generator Tombol Berbagi Sederhana.
Dalam kode HTML Anda akan menemukan tag dengan src atribut untuk setiap ikon. Periksa apakah masing-masing src atribut menunjuk ke lokasi yang tepat di mana set ikon Anda diunggah di Langkah 7.
Generator Tombol Berbagi Sederhana menambahkan jalur relatif ke file. Terkadang browser tidak dapat membuat gambar jika Anda menggunakan jalur relatif, jadi itu ide yang bagus gunakan jalur absolut sebagai gantinya. Dengan cara ini setiap browser yang berpotensi digunakan oleh pengunjung Anda dapat yakin tentang lokasi file ikon yang diperlukan.
Jalur gambar relatif yang ditambahkan oleh generator terlihat seperti ini:
Mari kita ubah src atribut setiap ikon ke jalur absolut yang artinya akan menyertakan URL lengkap file.
Jalur URL di atas akan terlihat seperti ini:
Langkah 9: Unggah File yang Dimodifikasi dan Aktifkan Tema Anak
Hubungkan server Anda melalui FTP dan unggah semua file yang kami buat dalam tutorial ini yang belum Anda unggah: the functions.php, itu style.css, dan file templat yang sesuai (dalam tutorial ini baik itu single.php atau content.php).
Akhirnya aktifkan tema anak di dasbor admin WP di bawah Penampilan> Tema menu.
Sekarang Anda siap dengan ikon berbagi sosial super ringan, hemat sumber daya, dan dapat disesuaikan. Anda dapat online dan memeriksanya langsung di situs Anda.
Kesimpulan
Dalam tutorial ini saya menunjukkan kepada Anda cara menambahkan tombol berbagi sosial kustom ke akhir posting tunggal. Anda dapat menambahkan ikon berbagi ke lokasi lain di situs web Anda dengan bantuan hook tindakan yang kami buat.
Cukup tambahkan kode yang kami gunakan di Langkah 5 ke tempat di mana Anda ingin tombol ditampilkan:
Anda juga harus menemukan file templat yang tepat jika Anda ingin menempatkan ikon di tempat lain. Halaman tunggal diperintah oleh file templat yang disebut page.php, sementara lampiran media seperti gambar dimuat oleh attachment.php.
Jika Anda ingin menampilkan tombol berbagi sosial di tempat yang berbeda di situs web Anda, Anda dapat menggunakan Hierarki Templat WordPress untuk menemukannya.
