Tata letak dua kolom (sidebar tetap dan konten lancar). Memperbaiki Menu Atas dan Bilah Sisi Mengambang di WordPress Bilah Sisi Tetap saat Gulir

Halo, para pembaca situs blog yang budiman. Ini lebih merupakan catatan untuk diri saya sendiri, agar tidak melupakan apa sebenarnya yang saya lakukan ketika ingin mengembalikan semuanya. Semuanya bermula ketika salah satu pembaca menyarankan untuk menulis tentang sebuah plugin untuk WordPress bernama Q2W3 Fixed Widget (Sticky Widget), yang dapat membuat widget apa pun di sidebar mengambang atau, dengan kata lain, diperbaiki.

Itu. Saat Anda menggulir halaman, Anda akan melihat bahwa bagian utama sidebar akan naik, tetapi widget yang terletak di bagian paling bawah akan tetap berada di area tampilan tidak peduli seberapa jauh Anda memindahkan teks ke bawah. Saya akan segera membuat reservasi bahwa memasang iklan kontekstual dengan cara ini dilarang dan Anda dapat dihukum karenanya (ternyata di komentar, YAN mengizinkannya, tetapi Adsense melarangnya).

Pluginnya bagus, tetapi widget di tema saya dinonaktifkan, jadi saya memecahkan masalah ini menggunakan beberapa baris kode JavaScript yang saya temukan di Internet.

Hasilnya, menu teratas saya diperbaiki di bagian paling atas viewport (sebenarnya, kode CSS saja sudah cukup untuk ini, tetapi kami tidak mencari cara yang mudah), dan bagian bawah sidebar diperbaiki di bagian atas. kanan layar saat Anda mencapainya saat menggulir halaman. Saya tidak tahu apakah ini akan ada gunanya, tapi solusinya sangat sederhana.

Mengapa memperbaiki menu dan membuat sidebar mengambang?

Mengapa memperbaiki menu teratas, Anda bertanya? Secara umum, ini adalah eksperimen kecil dengan topik perbaikan. Secara hipotesis murni, kita dapat berasumsi bahwa hal ini dapat menyebabkan peningkatan jumlah halaman yang dilihat dan waktu yang dihabiskan pengguna di situs.

Di sisi lain, intrusi yang berlebihan dari panel tetap tersebut dapat menimbulkan reaksi negatif dari pembaca, sehingga pertanyaan tentang kegunaan tindakan ini tetap terbuka. Anda harus melihat hasilnya setelah seminggu penggunaan - jika menu tidak lagi diperbaiki (dipaku di tepi atas area tampilan), maka percobaan gagal. Untuk berjaga-jaga, saya akan mengambil tangkapan layar tentang bagaimana semua itu terjadi.

Sidebar mengambang di WordPress dibuat untuk alasan yang sedikit berbeda - untuk menarik lebih banyak perhatian pada sesuatu. Pada prinsipnya, di sini Anda dapat memasukkan daftar kategori dan daftar postingan populer atau terbaru, yang sekali lagi akan mencoba melakukan tugas untuk meningkatkan perilaku. Namun paling sering, iklan ditempatkan di blok mengambang (iklan kontekstual tidak diperbolehkan, seperti yang telah saya sebutkan), yang, secara hipotesis, akan meningkatkan pendapatan webmaster. Mari kita lihat hasilnya dalam seminggu.

Cara Memperbaiki Menu Teratas di WordPress

Saya menemukan solusi untuk diri saya sendiri di Internet. Untuk menggunakan metode ini, perpustakaan jQuery harus disertakan. Cara melakukan ini dijelaskan secara rinci di artikel tentang memuat konten.

Jika Anda ingat, dalam artikel tentang mengoptimalkan kecepatan memuat halaman, Anda perlu mencoba menggabungkan semua CSS dan JS menjadi satu yang umum (dalam arti dua - satu untuk gaya dan yang lainnya untuk skrip). Jadi, sebenarnya, saya menambahkan baris kode yang diberikan tepat di bawah ke file tersebut. Meskipun Anda dapat menambahkannya langsung ke kode Html, mengelilinginya dengan tag skrip. Misalnya, ini bisa dilakukan di template header.php di dalam tag head.

Anda juga dapat menerapkan perbaikan menu atas menggunakan CSS murni - ini akan membantu kami. Sebenarnya, pemosisian juga digunakan di sini menggunakan properti CSS ini, tetapi menu tetap juga dapat mulai ditampilkan tidak segera, tetapi beberapa saat setelah dimulainya pengguliran (pada jarak tertentu dari atas).

Dalam kasus saya, kode untuk memperbaiki menu atas terlihat seperti ini:

$(fungsi())( $(jendela).scroll(fungsi() ( var top = $(dokumen).scrollTop(); if (atas< 10) $("#navi").css({top: "0", position: "relative"}); else $("#navi").css({top: "0px", width: "100%", position: "fixed"}); }); });

Izinkan saya mengingatkan Anda bahwa Anda dapat menempelkan potongan kode ini ke:

  • File berekstensi .js yang berada di folder dengan tema yang Anda gunakan (/wp-content/themes/theme). Ini cocok untuk Anda hanya jika ada baris yang ditulis untuk itu di file header.php untuk memuatnya bersama dengan halaman web situs Anda, yang mungkin terlihat seperti ini:
  • Anda dapat menggunakan file header.php itu sendiri, mengapit kode ini di antara tag head pembuka dan penutup dan membingkainya dalam tag skrip, misalnya, seperti ini: $(function())( $(window).scroll(function()) ( var top = $( dokumen).scrollTop(); if (atas< 10) $("#navi").css({top: "0", position: "relative"}); else $("#navi").css({top: "0px", width: "100%", position: "fixed"}); }); });
  • Anda juga dapat menulis kode ini di tag skrip di tempat lain mana pun. Hal utama adalah memuatnya di halaman blog yang tepat. Misalnya, Anda dapat melakukannya di footer.php sebelum tag body penutup.

    • Sekarang mari kita lihat langsung kode ini. Ternyata setelah 10 piksel dari atas, posisi relatif digantikan oleh posisi tetap (lihat artikel di link yang diberikan tepat di atas). Jika perlu, maka di baris dengan else Anda dapat memilih bukan nol sebagai nilai atas, dan kemudian menu yang ditetapkan di atas akan mundur dari tepi atas area pandang dengan nilai piksel ini (menurut saya, ini tidak perlu ).

    Berbeda dengan kode aslinya, saya juga harus menambahkan lebar: "100%", karena jika tidak, ukuran menu akan berkurang lebarnya, yang akan merusak keseluruhan gambar.

    Begini, untuk lebih jelasnya, saya akan memberikan kode Html yang digunakan untuk membentuk menu teratas di template blog WordPress saya (ada di file header.php saya dari ):

    Dalam template Anda, kemungkinan besar, tampilan item menu akan ditentukan menggunakan, misalnya, konstruksi (fungsi) seperti itu, tetapi bukan itu intinya.

    • Sergei Savenkov

      semacam ulasan "pendek"... seolah-olah mereka sedang terburu-buru di suatu tempat