Loncat ke Konten Utama

3 tema baru kustomisasi Twenty Seventeen

Apakah Anda mencari tema dan plugin WordPress terbaik?

Unduh plugin terbaik dan tema WordPress di Envato dan buat situs web Anda dengan mudah. Sudah lebih dari 49.720.000 unduhan. [EKSKLUSIF]

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

dalam hal ini TutorielSaya akan menunjukkan kepada Anda lima cara untuk menyesuaikan tema ini agar sesuai dengan blog Anda. Kami akan mulai dengan dasar-dasar dan beralih ke penyesuaian yang lebih sulit dan berdampak.

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

#1 Buat menu tautan sosial

Nah, bagian pertama ini lebih dari sekedar peretasan. Tapi itu personalisasi yang hanya dilakukan di Twenty Seventeen.

Twenty Seventeen memiliki menu yang menarik untuk tautan sosial di footer.

Masalahnya adalah bahwa beberapa pengguna telah melaporkan bahwa mereka mengalami kesulitan mencari tahu bagaimana cara menambahkan tautan jaringan sosial mereka ke menu ini. Untungnya, ini sangat sederhana setelah 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 jelajahi prosesnya.
  • Mulailah dengan membuka "Customizer".
  • Pilih opsi "Menu" dan pilih "Menu Tautan Sosial".
  • Ubah nama menu baru Anda.
  • Tambahkan tautan ke setiap jejaring sosial yang tersedia.
  • Centang kotak di samping " Tautan Sosial ".

Setelah selesai, menu Anda akan terlihat seperti ini:

Divi: Tema WordPress terbaik sepanjang masa!

lebih 554.000 unduhan, Divi adalah tema WordPress paling populer di dunia. Sudah lengkap, mudah digunakan dan dilengkapi dengan lebih dari 62 template gratis. [Direkomendasikan]

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

# 2 Ubah tanda tangan "Ditenagai dengan bangga oleh WordPress"

Ada dua alasan mengapa Anda mungkin ingin mengubah teks pada footer yang menunjukkan bahwa situs Anda adalah "Proudly Powered by WordPress." "

Mungkin Anda ingin memperluas yang terakhir, menambahkan teks tambahan: "Dengan bangga didukung oleh WordPress, yang dirancang oleh Desain WebPress, dan dihosting oleh LAMPress hosting yang. »

Mungkin Anda ingin benar-benar mengubah tanda tangan Anda 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 prasangka untuk itu).

Buat Toko Online Anda dengan mudah

Unduh WooCommerce gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress. [GRATIS]

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

Sekarang Anda memiliki dua opsi. Anda cukup mengomentari baris ini dengan menambahkan "//" sebelum kode, atau Anda dapat mempertimbangkan untuk menggantinya dengan teks footer khusus Anda sendiri. Di sini adalah kode untuk ditambahkan untuk membuat teks footer.

#3 Menu Navigasi yang Ditingkatkan

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

Pertama, mari kita mulai menambahkan kode berikut pada tema Anda (anak):

/ * Satu halaman nav kode * / jQuery (document) .ready (function () {/ * Add padding dan id dahi Untuk Setiap bagian halaman * / jQuery ( "h2.entry-judul") .each (function () {var .. panelId = jQuery (ini) .html () toLowerCase () ganti (/ \ s + / g, "-"); jQuery (ini) .wrapInner (function () {return "<span style =" padding-top: 96px; id = ' "+ panelId +"'> </ span> ";})}) / * Hapus tautan navigasi menyoroti * / jQuery ( '# top-menu li) removeClass (.' saat-menu-item current_page_item '); / * Tambahkan menyoroti satu kali klik * / jQuery (' # menu li top-a ') (.' klik', function (event) {jQuery (ini) .parent () induk () menemukan (.. 'li') removeClass ( 'saat-menu-item.'); jQuery (ini) .parent () addClass () 'saat-menu-item.';}); / * Periksa URL saat ini dan sorot nav untuk halaman saat ini * / jQuery ( '# menu li top-a') masing-masing (function () {var PAGEURL = jQuery (sewa) attr ( 'href') navUrl var = jQuery (ini) attr ( 'href').; jika (navUrl == PAGEURL) {jQuery (ini) .parent () addClass ( 'saat-menu-item.');}})})

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

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

Selain itu, kita dapat membuat pindah ke setiap bagian banyak halus dengan menginstal dan mengaktifkan plugin gratis: jQuery Scroll Halus.

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

Misalnya, untuk membuat tautan ke bagian "Tentang", Anda perlu membuat tautan khusus dan menggunakan " #about Sebagai jangkar tautan. Untuk detail lebih lanjut, lihat Cara menyesuaikan tema " Dua puluh Tujuh belas WordPress ".

Dengan sedikit usaha, Anda akan tiba pada hasil yang meyakinkan:

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

Artikel ini berisi komentar 5
  1. Halo,

    Saya mengikuti instruksi Anda tapi ikon saya hanya ditampilkan di versi mobile blog saya dan bukan pada versi pc, jika Anda dapat membantu saya yang akan menjadi hebat!
    Merci,
    Julie

    1. Halo,
      Anda harus memastikan bahwa style menu benar-benar dimuat. Anda juga dapat memeriksa kode menu untuk memastikan bahwa tag yang membawa ikon ada.

Tinggalkan komentar

Alamat email Anda tidak akan dipublikasikan. Bidang yang harus diisi ditandai *

Situs ini menggunakan Akismet untuk mengurangi yang tidak diinginkan. Pelajari lebih lanjut tentang bagaimana data komentar Anda digunakan.

Kembali ke atas
22 saham
saham16
menciak1
Register5
Ada apa