15+ Trik PHP dan CSS Blog WordPress
Semua trik PHP dan CSS blog wordpress pada postingan ini merupakan pengaplikasian pengalaman pribadi selama ngeblog baik itu di wordpress maupun di blogspot tapi akan lebih banyak menggunakan wordpress.
Trik PHP dan CSS Blog WordPress
Apa yang dimaksud dengan trik PHP dan CSS? Maksudnya adalah mempercantik blog atau desain blog/website dengan menambahkan fitur-fitur yang dibutuhkan pada blog wordpress atau blogger kamu. Contohnya, ingin menyembunyikan featured image halaman depan wordpress maka bisa menggunakan CSS;
.(nama_class) {display: none;}
Mempercantik desain blog memang bukan segalanya tapi penting supaya menarik pengunjung dan senang akan layout blog/website yang mereka buka. Namun, jangan berkutat terus di dalam mempercantik layout sampai lupa menulis atau memperkaya konten karena konten sebuah website adalah raja atau sering disebut para mastah seo bahwa content is the king.
Trik PHP dan CSS blog wordpress ini sudah banyak bertebaran di Internet dan kamu cukup menggunakan sesuai keperluan saja karena tidak semua trik PHP dan CSS pada postingan ini musti atau harus di praktekkan ke blog atau website kamu.
Trik PHP dan CSS blog wordpress apa saja yang sudah HIPVIE tampung selama ini dan sudah di aplikasikan ke blog? Mari kita simak daftarnya dibawah ini;
#1. Responsive iframe
Responsive iframe digunakan untuk menampilkan (embed) video seperti video dari Youtube. Masalahnya, ada beberapa theme atau templates yang belum terintegrasi dengan responsive iframe (tampilan video yang menyesuaikan layout di handphone).
Responsive iframe ini bisa di aplikasikan baik di blogspot maupun di wordpress yang terdiri dari HTML dan CSS. Berikut kode nya;
Kode HTML;
Kode CSS;
.embed-container {
position: relative;
padding-bottom: 56.25%; /* ratio 16x9 */
height: 0;
overflow: hidden;
width: 100%;
height: auto;
}
#2. Menyembunyikan class tertentu pada wordpress
Trik PHP dan CSS blog wordpress berikutnya adalah menyembunyikan object tertentu pada blog wordpress. Kalau kamu mau menyembunyikan object tertentu pada wordpress, sebagai contoh: featured image, judul halaman, judul komentar, dsb, kamu bisa menggunakan kode CSS. Kamu harus menemukan nama class nya, biasanya bisa menggunakan inspect pada chrome, setelah kamu menemukan class nya, tinggal gunakan CSS dibawah ini:
.nama_class {display: none}
#3. Collapse dan Expand
Fitur collapse (menyembunyikan) dan expand (menampilkan) ini kadang-kadang perlu di dalam sebuah blog. Bisa kamu gunakan untuk menu maupun konten lainnya.
Berikut kode untuk collapse dan expland;
Kode CSS;
#menulink {
display: none;
}
Kode javascript;
Kode HTML;
Year of Release
#4. Mengubah URL Author pada blog wordpress
Default tema wordpress itu selalu menampilkan link author padahal link author ini sama dengan username untuk login ke admin wordpress kita. Ini perlu diganti untuk menghindari hacking. Contohnya pada gambar dibawah ini;
URL pada author tersebut adalah https://www.blog.hipvie.com/author/adminblog_2018_hip/ (blog ini sudah di non-aktifkan) artinya username login ke admin blog tersebut adalah adminblog_2018_hip. Kita perlu mengganti url tersebut. Kalau saya selalu menggantinya ke url home, jadinya seperti gambar dibawah ini;
Bila kursor diarahkan ke author tersebut, maka url yang tampil adalah alamat url home. Untuk menggantinya, kita akan menambahkan kode berikut ke tema wordpress tepatnya di function.php, tapi hati-hati untuk mengedit function.php, pastikan kamu backup dulu sebelum menambahkan kode tersebut untuk menghindari fatal error.
Copy paste kode berikut di function.php pada tema wordpress kamu;
add_filter( 'author_link', 'modify_author_link', 10, 1 );
function modify_author_link( $link ) {
$link = '/';
return $link;
}
#5. Responsive image pada blogger/wordpress
Untuk blogger maupun wordpress, bila tema/template belum mendukung responsive image (gambar responsif), maka sangat tidak enak dilihat setiap gambar yang tampil di handphone karena tidak fit to screen. Untuk menampilkan gambar yang responsif, kamu bisa menambahkan kode CSS berikut;
.imgfooter { width:100%; }
@media(min-width: 500px) { .imgfooter { width:100%; } }
@media(min-width: 800px) { .imgfooter { width: 985px; } }
Untuk menampilkan gambarnya, kamu bisa menggunakan kode HTML dibawah ini;
Bila tema sudah mendukung gambar responsive, kamu tidak perlu menggunakan kode diatas.
#6. Call shortcode in PHP
Shortcode pada wordpress selain ditampilkan pada postingan (posts dan pages) bisa juga ditampilkan pada tema wordpress kamu seperti pada index.php, header.php, footer.php dan lainnya. Untuk memanggil shortcode tersebut, kamu bisa menggunakan kode berikut;
#7. Get tags php
Untuk menampilkan tags pada wordpress yang dapat kamu tambahkan pada single.php atau posisi yang kamu inginkan, kamu bisa menggunakan kode berikut;
#8. Put code in HTML
Untuk meletakkan kode pada HTML tanpa harus menjalankan kode secara otomatis, kamu dapat menggunakan kode berikut;
#9. Find path on cPanel
Bagi pengguna cPanel dan yang gemar utak atik tema dan mempercantik tampilannya, sering sekali sulit menemukan object yang mau diubah mengingat banyaknya file pada satu tema pada wordpress. Untuk menemukannya, kamu bisa mencari via language;
Pada file tersebut ada .pot, buka dan edit lalu control F, tuliskan nama object yang mau diubah, bila ada, maka akan ditampilkan letak object yang kamu mau ubah tersebut. Contohnya saya mau mengubah tulisan Tags, maka letak object ini ada pada ilovewp-admin/helper-functions.php:96;
Letak object setiap tema wordpress mungkin berbeda-beda. Trik diatas mempercepat pencarian dan menghemat waktu karena bisa saja hanya mencari satu object semua file pada tema dibuka satu per satu, ini akan sangat memakan waktu yang sangat banyak.
#10. Add bullet di sidebar
Ada beberapa tema wordpress yang tidak memiliki bullet pada sidebar, contohnya pada gambar dibawah ini;
Saya sendiri kurang puas melihat bila tidak ada list/bullet pada posting tersebut, untuk menambahkannya, kamu bisa menggunakan CSS berikut;
.widget ul {
margin: 0 0 0em 1.1em;
}
.widget ul li {
list-style-type: disc;
}
atau
.sidebar-main li {list-style: square;
margin-left:20px;
line-height: 25px;
}
Untuk demonya, bisa dilihat pada blog ini
#11. Menghilangkan background pada Google Adsense
Pada beberapa tema wordpress, saat kita menempelkan kode google adsense, maka ada background warna kuning sehingga kurang menarik melihat tampilan adsense tersebut seperti gambar berikut;
Foto: wpadvancedads.com
Kamu bisa menghilangkan warna latar tersebut dengan menambahkan kode CSS berikut;
ins.adsbygoogle { background: transparent !important; }
#12. Tahun copyright otomatis
Kalau kamu menggunakan tahun copyright di blog wordpress/blogger, tidak perlu lagi manual harus mengganti tahun tersebut apabila sudah berganti tahun. Biar otomatis mengikuti tahun terkini, kamu bisa menggunakan kode berikut ini;
Copyright © . All Rights Reserved.
#13. Date in bahasa
Untuk menampilkan bulan dan tahun bahasa Indonesia pada blog wordpress, kamu bisa menggunakan kode berikut. Sebelum itu, contohnya pada gambar berikut ini;
Maka hasil tampilan yang saya maksudkan adalah seperti ini;
Bulan dan tahun tersebut otomatis berubah sesuai dengan tanggal terkini. Hal ini perlu bagi kamu yang mau menampilkan judul pada artikel ter-update di blog. Berikut kodenya;
#14. Menampilkan Meta Deskripsi dari Yoast
Jika kamu menggunakan plugin Yoast dan ingin menampilkan deskripsi dari yoast, kamu bisa menggunakan kode berikut;
#15. Redirect from 404
Bukan hanya user yang tidak suka dengan halaman yang terputus alias 404 tapi di mata google juga hal ini berdampak buruk terhadap ranking. Kamu bisa membuat satu halaman khusus yang menerangkan bahwa info/link yang dicari tidak ada dan mengarahkan ke halaman tersebut.
Selain bisa juga di atur lewat .htaccess, kamu bisa menyisipkan kode ini tepat pada baris pertama pada 404.php di tema wordpress kamu;
Ganti location dengan halaman khusus yang kamu buat. Berikut kodenya;
#16. Hide adsense on mobile
Google adsense dapat ditampilkan dikedua platform yaitu desktop dan mobile. Tapi ada pilihan lain dimana kita bisa menampilkan google adsense hanya di desktop sementara di handphone bisa kita sembunyikan. Kalau kamu mencari kode tersebut, berikut kamu bisa gunakan dibawah ini;
Silakan kamu ganti ID publisher dan nomor slot adsense kamu. Ukuran adsense pada desktop juga bisa kamu atur sesuai selera selama tidak melanggar TOS google adsense.
Sementara itu saja dulu trik PHP dan CSS blog wordpress, bila ada yang baru akan ditambahkan. Selamat mencoba!
