Terkadang ada kejadian seperti ini, kita import backupan post website lama ke website baru. Namun kita hanya berhasil mengimpor teksnya saja, sedang gambar-gambar thumbnailnya tidak terimport.
Nah daripada ribet dan jengkel ngelihat postingan yang gambar thumbnailnya rusak, dihapus saja thumbnail-thumbnail yang rusak itu.
Caranya kita masuk ke tabel wp_webkita_postmeta di database WordPress kita, lalu jalankan sql ini:
DELETE FROM wp_webkita_postmeta WHERE meta_key = '_thumbnail_id';
Ingat webkita itu perlu diganti dengan prefix kamu sendiri ya.
Saat mengembangkan theme ataupun plugin WordPress, bisa jadi kamu perlu menggunakan fitur pemilih gambar atau galeri midea WordPress.
Media picker atau pemilih gambar ini sangat bermanfaat, karena sangat memudahkan kita untuk memilih gambar yang sudah ada di website kita begitu juga mengupload gambar baru.
Di bawah ini adalah script contoh cara penggunaannya:
Tentu kita perlu menampilkan widget-widget pada tema WordPress yang kita buat. Oleh karena itu kita perlu memanggil function ini untuk menginclude file sidebar.php:
<?php get_sidebar(); ?>
Karena get_sidebar() itu memanggil file sidebar.php, maka kita perlu membuat file tersendiri bernama sidebar.php yang isinya kode ini:
Jika kamu mengembangkan tema/template WordPress, tentunya kamu butuh menampilkan menu navigasi pada header template kamu. Nah, kamu bakal butuh script ini:
//Header Menu Hook, for functions.php of your theme
function myplugin_header_navigation(){
register_nav_menu('myplugin-headernavigation',__('Header Navigation'));
}
add_action('init', 'myplugin_header_navigation');
Script di atas perlu ditambahkan pada fungtions.php dalam direktori template yang kamu buat. Lalu, tambahkan ini pada bagian header template kamu:
//Showing Header Menu, for header block of your theme
wp_nav_menu(array(
'theme_location' => 'myplugin-headernavigation',
'container_class' => 'header-menu'
));
Adapun untuk styling menu navigasi, mungkin css ini bisa membantu:
/*Header Menu*/
.header-menu ul {
margin: 0;
list-style: none;
padding: 0;
}
.header-menu ul li {
float: left;
line-height: 38px;
margin: 0 1px;
position: relative;
}
.header-menu ul li a {
margin: 0 1px;
padding: 0 15px;
color: #5d5c5c;
font-weight: 600;
display: block;
}
.header-menu .sub-menu li a,
.header-menu ul.children li a {
line-height: 1.5;
padding: 10px 15px;
}
.header-menu ul li:hover>a,
.header-menu ul li.current-menu-item>a,
.header-menu ul li.current_page_item>a,
.header-menu ul li.current-menu-ancestor>a,
.header-menu ul li.focus>a {
color: #0e365a;
}
.header-menu ul.sub-menu,
.header-menu ul.children {
background: #f2f2f2 none repeat scroll 0 0;
min-width: 200px;
position: absolute;
top: 100%;
z-index: 99;
left: -9999rem;
opacity: 0;
-webkit-transform: translateY(0.6rem);
-ms-transform: translateY(0.6rem);
-o-transform: translateY(0.6rem);
transform: translateY(0.6rem);
-webkit-transition: opacity 0.15s linear, transform 0.15s ease, left 0s 0.15s;
-o-transition: opacity 0.15s linear, transform 0.15s ease, left 0s 0.15s;
transition: opacity 0.15s linear, transform 0.15s ease, left 0s 0.15s;
}
.header-menu ul li:hover>ul.sub-menu,
.header-menu ul li:hover>ul.children,
.header-menu ul li.focus>ul.sub-menu,
.header-menu ul li.focus>ul.children {
left: 0;
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
-webkit-transition: opacity 0.15s linear, transform 0.15s ease, right 0s 0.15s;
-o-transition: opacity 0.15s linear, transform 0.15s ease, right 0s 0.15s;
transition: opacity 0.15s linear, transform 0.15s ease, right 0s 0.15s;
}
.header-menu ul.sub-menu li,
.header-menu ul.children li {
float: none;
display: block;
border-bottom: 1px solid #e1e1e1;
}
.header-menu ul.sub-menu li:last-child,
.header-menu ul.children li:last-child {
border: none;
}
.header-menu ul.sub-menu li ul,
.header-menu ul.children li ul {
right: 9999em;
left: auto !important;
top: 0% !important;
-webkit-transition: opacity 0.15s linear, transform 0.15s ease, right 0s 0.15s;
-o-transition: opacity 0.15s linear, transform 0.15s ease, right 0s 0.15s;
transition: opacity 0.15s linear, transform 0.15s ease, right 0s 0.15s;
}
.header-menu ul.sub-menu li:hover>ul,
.header-menu ul.children li:hover>ul,
.header-menu ul.sub-menu li.focus>ul,
.header-menu ul.children li.focus>ul {
right: -100%;
left: auto !important;
top: 0% !important;
-webkit-transition: opacity 0.15s linear, transform 0.15s ease, left 0s 0.15s;
-o-transition: opacity 0.15s linear, transform 0.15s ease, left 0s 0.15s;
transition: opacity 0.15s linear, transform 0.15s ease, left 0s 0.15s;
}
.header-menu li.menu-item-has-children>a:after,
.header-menu li.page_item_has_children>a:after {
content: "\f107";
font-family: FontAwesome;
position: absolute;
right: 15px;
top: 2px;
}
.header-menu ul.sub-menu li.menu-item-has-children>a::after,
.header-menu ul.sub-menu li.page_item_has_children>a::after {
top: 10px;
}
.header-menu ul.sub-menu li.menu-item-has-children>a:after,
.header-menu ul.children li.page_item_has_children>a:after {
content: "\f105";
}
.header-menu ul li.menu-item-has-children a,
.header-menu ul li.page_item_has_children a {
margin-right: 15px;
}
/*End of Header Menu*/
Jika kita menggunakan jQuery, kita bisa membuat tombol scroll to top atau kembali ke atas dengan mudah dan keren, yang jika kita klik kita bisa scrolling ke bagian atas halaman dengan animasi yang halus.
Coba kita buat tombol dengan id backToTop dan buat script seperti ini:
Saat posisi layar kita di atas halaman, tombol scroll to top itu tersembunyi. Begitu kita scroll ke bawah sedikit, maka akan muncul tombol itu, lalu kita bisa klik untuk kembali ke atas.
