Laman » WordPress » Pengoptimuman Speed WordPress dengan Ikon Perkongsian Sosial Custom
Pengoptimuman Speed WordPress dengan Ikon Perkongsian Sosial Custom
Ia mungkin kelihatannya satu tugas yang mudah tetapi menambah baik butang perkongsian sosial ke laman WordPress boleh menjadi masalah. Ketika saya mengatakan dengan baik berperilaku saya maksudkan, plugin mudah alih yang ramah, ringan, ramah sumber daya, yang paling ringan, sumber daya tidak ada. Mereka cenderung untuk memakan sumber seperti gila, dan kenapa ada sesiapa yang ingin menambah masa beban plugin sebanyak 25-35% hanya untuk memaparkan beberapa ikon di laman web mereka?
Berita baiknya adalah bahawa anda tidak semestinya memerlukan plugin untuk menyelesaikan tugas ini. Dalam tutorial ini, saya akan menunjukkan kepada anda bagaimana anda boleh dengan mudah tambah butang perkongsian sosial tersuai hingga akhir jawatan di laman WordPress anda hanya beberapa baris kod.
Langkah 1: Menjana Butang Perkongsian Sosial
Kami akan menggunakan Generator Perkongsian Mudah, alat mudah dan mudah digunakan untuk menghasilkan ikon perkongsian. Kelebihan utama aplikasi ini adalah bahawa butang yang dihasilkannya berjalan pada frontend, oleh itu mereka tidak akan membebankan pelayan anda dan anda juga boleh menyimpan aktiviti pengguna anda secara peribadi.
Untuk menghasilkan butang tersuai anda, pergi ke sini dan tekan Mulakan. Pilih 1 dari 6 gaya butang berbeza. Klik seterusnya dan tandakannya rangkaian sosial anda mahu menambah ke laman web anda. Apabila anda selesai, anda perlu mengisi maklumat tapak web anda.
Pada skrin ini (di bawah), anda akan mendapati dua pilihan: 'Tiada JavaScript' dan 'JavaScript'. Tandakan JavaScript, kerana ia akan membolehkan pelayar untuk mengesan URL secara dinamik oleh itu pelawat anda akan dapat berkongsi setiap jawatan secara individu bukan hanya URL laman utama.
Akhirnya lihat pratonton langsung, muat turun set ikon yang dipilih, dan ambil kod yang anda hasilkan.
Langkah 2: Buat Tema Kanak-kanak
Kini anda perlu menambah ikon dan kod yang dihasilkan ke laman web anda. Pertama sekali anda perlu membuat tema kanak-kanak.
Anda boleh dengan mudah membuat tema anak WP dengan bantuan tutorial kami, atau anda boleh mengikuti langkah-langkah dari artikel WP Codex ini. Jika anda sudah mempunyai satu, anda boleh melompat ke Langkah 3.
Tema kanak-kanak berkaitan dengan tema yang anda gunakan sekarang - dengan cara yang agak sama seperti kanak-kanak berkaitan dengan ibu bapanya. Ia mewarisi segala (gaya dan fungsi) dari tema ibu bapa tetapi anda boleh menambah fungsi tambahan untuk itu.
Dalam kes kita fungsi tambahan akan menjadi butang perkongsian sosial tersuai.
Langkah 3: Buat Fungsi Tersuai yang Memaparkan Ikon
Kami akan menambah fungsi tersuai kepada fail functions.php tema anak itu.
Dengan bantuan fungsi ini, anda akan dapat menambah ikon sosial di mana sahaja anda mahu di laman web anda dengan menggunakan cangkuk tindakan tersuai. Jika tema anak anda tidak mempunyai fail functions.php lagi, buat fail teks kosong dalam folder root tema anak anda dengan fungsi nama, dan ubah lanjutannya ke .php.
Masukkan baris kod berikut ke dalam fail kosong ini:
Apabila anda functions.php fail disediakan menambah coretan kod berikut kepadanya:
/ * * Menambah ikon perkongsian sosial tersuai * / fungsi add_social_sharing () ?>
Kongsi siaran ini
Akhirnya padamkan baris komen HTML dari coretan kod di atas dan menggantikannya dengan kod HTML anda dijana dalam Langkah 1 dengan Penjana Butang Perkongsian Sosial.
Langkah 4: Salin Fail Templat yang sesuai dengan Folder Tema Anak
Secara lalai, jawatan tunggal diperintah oleh fail templat yang dipanggil single.php. Kadang-kadang - terutamanya dalam tema yang lebih moden - struktur single.php adalah lebih rumit, kerana ia juga memuatkan fail templat tambahan. Dalam langkah ini kita perlu mencari fail templat yang sesuai di mana kita boleh menambah ikon kemudian.
Untuk mencari tempat yang tepat untuk butang sosial yang kita perlukan untuk mencari fail template itu mengandungi fungsi yang memuat kandungan jawatan tunggal.
Mari buka editor tema di papan pemuka admin WordPress di bawah Penampilan> Editor. Di penjuru kanan sebelah atas anda dapat mencari senarai jatuh turun di mana anda boleh memilih tema ibu bapa anda. Di bawah dropdown anda boleh melihat semua fail templat mengandungi tema ibu bapa anda. Tatal ke bawah sehingga anda dapati Templat pos tunggal (dipanggil single.php) dan membukanya.
Jika tema induk menggunakan get_template_part () Fungsi WP di single.php fail yang bermaksud ia menggunakan fail templat tambahan untuk memuatkan kandungan jawatan tunggal.
Pertama anda perlu mengetahui yang mana ini. Nama fail template tambahan adalah parameter pertama get_template_part () fungsi.
Parameter pertama ialah 'kandungan' yang bermaksud kita mencari fail templat dipanggil content.php. Anda perlu menyalin fail ini dari folder akar tema ibu bapa ke folder root tema kanak-kanak untuk mengubahnya.
Langkah 5: Tambah Cangkuk Tindakan ke Fail Templat Kanan
Kami mencipta fungsi yang dipanggil add_social_sharing () di Langkah 3, dan kami melekatkannya kepada cangkuk tindakan adat yang dipanggil custom_social_share. Sekarang kita perlu menambah cangkuk ini ke tempat di mana kita mahu fungsi itu dilaksanakan.
Berikut adalah coretan kod yang anda perlu masukkan ke tempat yang betul:
Seterusnya, mari cari tempat yang betul.
Buka fail templat yang anda tambahkan pada tema anak anda di Langkah 4 dalam editor kod atau di dalam editor tema papan pemuka admin WordPress, dan cari the_content () fungsi.
Periksa jika ada wp_link_pages () berfungsi sebaik sahaja the_content () fungsi. Jika ada, coretan kod di atas akan datang selepas itu; jika tidak, ia mengikuti the_content () fungsi.
Langkah 6: Tambahkan Kod CSS untuk Tema Kanak-kanak
Buka style.css fail tema anak anda sama ada dalam editor kod anda atau dalam editor tema papan pemuka admin WordPress, salin kod CSS yang anda hasilkan dalam Langkah 1, tampalkannya ke akhir fail, dan simpan.
Kami akan menambah dua baris tambahan ke fail CSS untuk menjadikan ikon perkongsian sosial dipaparkan dengan betul dalam setiap tema. Salin dan tampal coretan kod berikut ke hujung style.css fail:
ul.share-buttons li a border: 0; ul.share-buttons li img display: inline;
Langkah 7: Muat naik Set Ikon Media Sosial ke Pelayan
Muat naik ikon media sosial yang dipilih yang anda muat turun di Langkah 1 ke folder tema anak anda. Sambungkan pelayan anda melalui FTP, buat folder baru yang dipanggil imej di dalam akar folder tema anak anda (/ wp-content / themes / your-child-theme / images) dan muat naik ikon yang ditetapkan di sini.
Kami namakan folder itu imej kerana ini adalah nama asal folder imej yang menggunakan Generator Perkongsian Mudah.
Langkah 8: Semak Laluan Fail Ikon
Selepas anda memuat naik ikon media sosial ke pelayan anda di Langkah 7, penting untuk memeriksa laluan fail ikon untuk memastikan ia akan dimuatkan.
Laluan fail imej memberikan petunjuk kepada penyemak imbas mengenai lokasinya di pelayan. Mari kita lihat laluan imej di dalamnya functions.php fail tema kanak-kanak. Buka fail dalam editor kod anda, dan navigasi ke add_social_sharing () berfungsi di mana anda perlu menyemak kod HTML yang anda hasilkan dengan Penjana Butang Perkongsian Mudah.
Dalam kod HTML, anda akan dapati tag dengan src atribut untuk setiap ikon. Periksa sama ada setiap src atribut menunjuk ke lokasi yang tepat di mana set ikon anda dimuat naik di Langkah 7.
Penjana Butang Perkongsian Mudah menambah laluan relatif kepada fail. Kadang-kadang pelayar tidak boleh memberikan imej jika anda menggunakan laluan relatif, jadi ia adalah idea yang baik gunakan jalan mutlak sebaliknya. Dengan cara ini setiap penyemak imbas yang berpotensi digunakan oleh pelawat anda boleh mati pasti mengenai lokasi fail ikon yang diperlukan.
Laluan imej relatif yang ditambah oleh penjana kelihatan seperti ini:
Mari kita tukar src atribut setiap ikon ke jalan mutlak yang bermaksud ia akan menyertakan URL penuh fail.
Laluan URL di atas akan kelihatan seperti ini:
Langkah 9: Muat naik Fail Modified dan Aktifkan Tema Kanak-kanak
Sambungkan pelayan anda melalui FTP dan muat naik semua fail yang kami buat dalam tutorial ini yang belum anda muat naik: functions.php, yang style.css, dan fail templat yang sesuai (dalam tutorial ini sama ada single.php atau content.php).
Akhir sekali, aktifkan tema kanak-kanak di papan pemuka WP admin di bawah Rupa> Tema menu.
Sekarang anda sudah bersedia dengan ikon perkongsian sosial yang bersifat super ringan, penjimatan sumber dan disesuaikan anda. Anda boleh pergi dalam talian dan semak ia hidup di laman web anda.
Kesimpulannya
Dalam tutorial ini saya menunjukkan kepada anda bagaimana untuk menambah butang perkongsian sosial tersuai hingga akhir jawatan tunggal. Anda boleh menambah ikon perkongsian ke mana-mana lokasi lain di tapak web anda dengan bantuan tindakan yang kami buat.
Cuma tambahkan kod yang kami gunakan dalam Langkah 5 ke tempat yang anda mahu butang dipaparkan:
Anda juga perlu mencari fail templat yang betul jika anda ingin meletakkan ikon di tempat lain. Halaman tunggal diperintah oleh fail templat yang dipanggil page.php, manakala lampiran media seperti imej dimuatkan oleh attachment.php.
Jika anda ingin memaparkan butang perkongsian sosial di tempat lain di laman web anda, anda boleh menggunakan Hierarki Templat WordPress untuk mencarinya.
