Cara menghapus thumbnail pada semua postingan di WordPress

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.

Script untuk menampilkan fitur pemilih gambar WordPress dalam pengembangan plugin dan theme

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:

<?php
	if( isset( $_POST['submit_image_selector'] ) && isset( $_POST['image_attachment_id'] ) ) :
        update_option( 'media_selector_attachment_id', absint( $_POST['image_attachment_id'] ) );
    endif;
    wp_enqueue_media();
	?>
	
	<form method='post'>
        <div class='image-preview-wrapper'>
            <img id='image-preview' src='<?php echo wp_get_attachment_url( get_option( 'media_selector_attachment_id' ) ); ?>' style="width: 256px;">
        </div>
        <input id="upload_image_button" type="button" class="button" value="<?php _e( 'Upload image' ); ?>">
        <input type="hidden" name='image_attachment_id' id='image_attachment_id' value='<?php echo get_option( 'media_selector_attachment_id' ); ?>'>
        <input type="submit" name="submit_image_selector" value="Save" class="button-primary">
    </form>
	
	<?php
	$my_saved_attachment_post_id = get_option( 'media_selector_attachment_id', 0 );
	?>
	<script>
		jQuery( document ).ready( function( $ ) {
			
			var file_frame;
			var wp_media_post_id = wp.media.model.settings.post.id; 
			var set_to_post_id = <?php echo $my_saved_attachment_post_id; ?>;
			jQuery('#upload_image_button').on('click', function( event ){
				event.preventDefault();
				
				if ( file_frame ) {
					
					file_frame.uploader.uploader.param( 'post_id', set_to_post_id );
					
					file_frame.open();
					return;
				} else {
					
					wp.media.model.settings.post.id = set_to_post_id;
				}
				
				file_frame = wp.media.frames.file_frame = wp.media({
					title: 'Select a image to upload',
					button: {
						text: 'Use this image',
					},
					multiple: false
				});
				
				file_frame.on( 'select', function() {
					
					attachment = file_frame.state().get('selection').first().toJSON();
					
					$( '#image-preview' ).attr( 'src', attachment.url ).css( 'width', '128' );
					$( '#image_attachment_id' ).val( attachment.id );
					
					wp.media.model.settings.post.id = wp_media_post_id;
				});
					
					file_frame.open();
			});
			
			jQuery( 'a.add_media' ).on( 'click', function() {
				wp.media.model.settings.post.id = wp_media_post_id;
			});
		});
	</script>

Cara mengaktifkan sidebar untuk menampilkan widget-widget WordPress pada tema/template yang kita buat

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:

<?php if(is_active_sidebar('themesaya_sidebar')) : ?>
<?php dynamic_sidebar('themesaya_sidebar'); ?>
<?php endif; ?>

Setelah itu kita perlu menambahkan kode di bawah ini untuk inisialisasi sidebar pada theme kita:

//Sidebar widget
function themesaya_custom_widgetarea(){
	register_sidebar(array(
		'name' 			=> 'Sidebar',
		'id'			=> 'themesaya_sidebar',
		'before_widget'	=> '<div class="widget-right-sidebar">',
		'after_widget'	=> '</div>',
		'before_title' 	=> '<h2>',
		'after_title'	=> '</h2>',
	));
}

add_action('widgets_init', 'themesaya_custom_widgetarea');

Jangan lupa ganti kata “themesaya” dengan textdomain theme kamu ya.

Prakteknya bisa dilihat di video ini:

Cara menambahkan area menu navigasi pada header tema WordPress

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*/

Contohnya seperti di video ini:

Cara membuat tombol “scroll to top” yang jika diklik akan mengembalikan posisi scroller ke atas halaman dengan halus

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:

jQuery(document).ready(function($){
    $(window).scroll(function(){
        if ($(this).scrollTop() > 50) {
            $('#backToTop').fadeIn('slow');
        } else {
            $('#backToTop').fadeOut('slow');
        }
    });
    $('#backToTop').click(function(){
        $("html, body").animate({ scrollTop: 0 }, 500);
        return false;
    });
});

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.