Cara melakukan redirect dari http menuju https dengan JavaScript

Domain kamu ada fitur https nya, tapi sering kali website kamu waktu dibuka orang suka yang kebuka yang http, tidak pakai s. Nah caranya supaya situs kamu terus menerus dibuka dengan https ada berbagai cara, misal dengan cara membuat file htaccess secara langsung di server side nya, atau melakukan pengaturan redirect di cpanel / panel hostingnya, dan lain sebagainya.

Di postingan ini saya tunjukkan cara sederhana redirect dengan JavaScript.

Dengan script di bawah ini, JavaScript akan mendeteksi url yang dibuka oleh user, jika ada http:// di dalam url itu, maka akan otomatis direplace menjadi https dan redirect ke https.

if(location.href.indexOf("localhost") < 0){
			if(location.href.indexOf("http://") > -1){
				location.href = location.href.replace("http://", "https://");
			}
		}

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.