dua puluh Seventeen adalah tema default WordPress paling serbaguna yang pernah ada. Namun, opsi yang dibangun ke dalam tema meninggalkan sesuatu yang diinginkan.

Dalam tutorial ini, saya akan menunjukkan kepada Anda lima metode untuk menyesuaikan tema ini agar sesuai blog Anda. Kami akan mulai dengan dasar-dasarnya dan beralih ke penyesuaian yang lebih sulit dan berdampak.

Setelah selesai, Anda dapat mengubah Twenty Seventeen menjadi situs yang indah dan modern untuk bisnis atau blog. Kamu tidak percaya padaku? Lihat, inilah yang bisa Anda buat:

Dua puluh tujuh belas kustomisasi

#1 Buat menu tautan sosial

Nah, bagian pertama ini lebih dari sekadar peretasan. Tetapi personalisasi hanya dapat dilakukan pada Twenty Seventeen.

Twenty Seventeen memiliki menu menarik untuk tautan sosial di catatan kaki.

Hubungan sosial dua puluh tujuh belas

Masalahnya adalah bahwa beberapa pengguna melaporkan bahwa mereka mengalami kesulitan mencari tahu cara menambahkan tautan jejaring sosial mereka ke menu ini. Untungnya, ini sangat sederhana sekali Anda tahu cara melakukannya.

Yang harus Anda lakukan adalah membuat menu dengan tautan ke jejaring sosial Anda dan menetapkannya ke lokasi Menu Tautan Sosial.

  • Mari kita telusuri prosesnya.
  • Mulailah dengan membuka "Customizer" (Appearance> Customize).
  • Pilih opsi “Menu” lalu pilih “Menu Tautan Sosial”.
  • Ubah nama menu baru Anda.
  • Tambahkan tautan ke setiap jejaring sosial yang tersedia.
  • Centang kotak di sebelah " Tautan Sosial '.

Setelah selesai, menu Anda akan terlihat seperti ini:

Dua puluh tujuh belas halaman personalisasi

Langkah terakhir adalah mengklik tombol "Simpan dan Publikasikan" di Penyesuai untuk menyimpan menu baru. Tautan Anda ke jejaring sosial sekarang akan ditampilkan di menu di bagian bawah halaman.

# 2 Ubah tanda tangan "Proudly powered by WordPress"

Situasi Wordpress

Ada dua alasan mengapa Anda mungkin ingin mengubah teks di footer yang menyatakan bahwa situs Anda "Proudly powered by WordPress." "

Mungkin Anda ingin memperluasnya, menambahkan teks tambahan: “Dengan bangga didukung oleh WordPress, dirancang oleh WebPress Designs, dan dihosting oleh LAMPress hosting yang. "

Mungkin Anda ingin mengubah tanda tangan sepenuhnya untuk sesuatu yang lebih pribadi.

Hal pertama yang perlu Anda lakukan adalah membuat dan mengaktifkan tema anak (petunjuk: jika Anda ingin menyederhanakan hidup Anda, unduh tema anak sudah dipersiapkan untuk itu).

Setelah Anda membuat dan mengaktifkan tema anak Anda, salin file "footer.php". Kemudian buka file "footer.php" ini dan temukan bagian kode ini: get_template_part ('template-parts / footer / site', 'info');.

Sekarang Anda memiliki dua opsi. Anda dapat mengomentari baris ini dengan menambahkan "//" tepat sebelum kode, atau Anda dapat mempertimbangkan untuk menggantinya dengan teks footer kustom Anda sendiri. Berikut adalah kode yang akan ditambahkan untuk membuat teks footer.

Footer khusus

#3 Menu Navigasi yang Disempurnakan

Selain membuat menu navigasi fungsional pada halaman navigasi, kami juga akan memperbaiki efek hover menu navigasi dan menambahkan pengguliran halus untuk meningkatkan pengalaman keseluruhan.

Pertama, kami akan mulai menambahkan kode berikut pada tema (anak) Anda:

/ * Kode navigasi satu halaman * / jQuery (document) .ready (function () {/ * Tambahkan padding dan id ke setiap bagian halaman depan * / jQuery ("h2.entry-title") .each (function () {var panelId = jQuery (this) .html (). toLowerCase (). replace (/ s + / g, "-"); jQuery (this) .wrapInner (function () {return " ";})}) / * Hapus penyorotan tautan navigasi * / jQuery ('# top-menu li'). RemoveClass ('current-menu-item current_page_item'); / * Tambahkan penyorotan saat klik * / jQuery ('# top -menu li a '). on (' click ', function (event) {jQuery (this) .parent (). parent (). find (' li '). removeClass (' current-menu-item '); jQuery (ini) .parent (). addClass ('current-menu-item');}); / * Periksa URL saat ini dan sorot navigasi untuk halaman saat ini * / jQuery ('# top-menu li a'). each (function () {var pageUrl = jQuery (location) .attr ('href'); var navUrl = jQuery (this) .attr ('href'); if (navUrl == pageUrl) {jQuery (this) .parent (). addClass ('current-menu-item');}})})

Anda dapat menambahkan ini kode pada file JavaScript dimuat oleh tema anak (apa yang direkomendasikan) atau menggunakan plugin yang memungkinkan Anda menambahkan JavaScript ke situs Anda. Pastikan untuk memuat kode setelah jQuery dimuat.

Lihat komentar di kode untuk mendapatkan gambaran lengkap tentang apa yang terjadi.

Selain itu, kami dapat membuat pergerakan ke setiap bagian menjadi lebih lancar dengan menginstal dan mengaktifkan plugin gratis: jQuery Scroll Halus.

Tentu saja, Anda masih perlu membangun menu navigasi dengan menambahkan tautan khusus ke setiap bagian menggunakan nama halaman yang ditampilkan di bagian ini.

Misalnya, untuk menautkan ke bagian "Tentang", Anda harus membuat tautan khusus dan menggunakan " #about Sebagai jangkar tautan. Untuk lebih jelasnya, lihat Bagaimana menyesuaikan tema " Dua puluh Tujuh belas WordPress '.

Dengan sedikit usaha Anda akan sampai pada hasil yang meyakinkan:

Dua puluh tujuh belas hasil navigasi

Ini tentu saja tidak semua yang bisa kita lakukan dengan Twenty Seventeen, kita nanti akan menawarkan tutorial lain tentang Twenty Seventeen.