備忘録&雑記

WordPressのお勧めカスタマイズ

私がしているWordPressのカスタマイズの一部を紹介します。



広告



ページのトップへ戻るボタン

footer.phpの

<?php wp_footer(); ?>

の直前に

<div id="page-top">
	<a id="move-page-top"><img src="<?php echo get_template_directory_uri(); ?>/images/top_yajirushi.png" width=50px height=50px alt="Go to the top"></a>
</div>

を書きます。

header.phpの

</head>

の直前に

<!-- jQuery -->
<!-- Go to the top -->
<script src="<?php echo get_template_directory_uri(); ?>/javascript.js" charset="<?php bloginfo('charset'); ?>"></script>
<!-- /jQuery -->

を書きます。

javascript.jsに以下を書きます。

jQuery(function(){
  // Go to the top
  jQuery(window).scroll(function(){
    // Retrieve the distance from the top to the current location and store it in the variable [now]
    var now = jQuery(window).scrollTop();
    // The distance (now) from the top to the current location is 10 or more
    if(now > 10){
      // Fade in slowly [# page-top]
      jQuery('#page-top').fadeIn('slow');
      // Otherwise fade out
    }else{
      jQuery('#page-top').fadeOut('slow');
    }
  });
  // Click event of button (id: move-page-top)
  jQuery('#move-page-top').click(function(){
  // Go to the top of the page
  jQuery('body,html').animate({
          scrollTop: 0
      }, 800);
  });
});

style.cssに以下を書きます。

#page-top{
    position:fixed;
    right:10px;
    bottom:10px;
    display: none;
    z-index:9999;
}
 
#page-top a{
    color:#fff;
    padding:10px;
    text-decoration:none;
    display:block;
    cursor:pointer;
    text-align:center;
    background:#aaa;
    line-height:100%;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
	border-bottom: none;
	text-decoration: none;
}
 
#page-top a:hover{
    background:#aaa;
    -webkit-transition:all 0.3s;
    -moz-transition:all 0.3s;
    transition:all 0.3s;
	border-bottom: none;
	text-decoration: none;
}

メニューボタンをクリックすると左からスライドしてメニューを表示させる

header.phpの<body>内のボタンを表示させたい部分に以下を書きます。

<div id="slide_menu">
	<?php wp_nav_menu( array ( 'theme_location' => 'header-navi' ) ); ?>
</div>
<div id="menu_button_wrap">
	<button id="menu_button"><img src="<?php echo get_template_directory_uri(); ?>/images/Menu.png" width=25px height=25px alt="Menu"> <?php _e('Menu', 'simple_tab'); ?></button>
</div>

javascript.jsに以下を書きます。

jQuery(function(){

// Navigation
$(function(){
     var $menu = $('#slide_menu'), // movement when clicking menu button
     $menuBtn = $('#menu_button'), // Specify menu button
     $wrap = $('#container'),
     // .layer is also objectized
     $layer = $('.menu_layer'),
     menuWidth = $menu.outerWidth();                
	    
     // Movement when clicking menu button
     $menuBtn.on('click', function(){
          $wrap.toggleClass('open');
	  if($wrap.hasClass('open')) {
	      // It was hidden by css. Display layer
	      $(".menu_layer").show();
	      $wrap.animate({'left' : menuWidth }, 300);
	      $menu.animate({'left' : -menuWidth }, 300);  
	  } else {
	      // Hide .layer
	      $(".menu_layer").hide();
	      $menu.animate({'left' : -menuWidth }, 300);
              $wrap.animate({'left' : 0 }, 300);
	  }
     });
		
     // Close the menu even when clicking. layer
     $layer.on('click', function(){
     $menu.animate({'left' : -menuWidth }, 300);
     $wrap.animate({'left' : 0 }, 300).removeClass('open');
     $layer.hide();
});

});

style.cssに以下を書きます。

#slide_menu {
	position: absolute; 
        top: 0;
	z-index: 3;
        left: -300px;
        width: 300px;
        height: 100%;
        background: #aaa;
	color: #fff;
	font-size: 100%;

}

#slide_menu > ul{
	margin: 10px;
	padding: 10px;
	border-bottom: 1px solid #fff;
	display:block;
}

.menu_layer {
    position: fixed;
    top: 0;
    z-index: 1;
    display: none;
    width: 100%;
    height: 100%;
    background-color: transparent;
}

.wrap.open {
    position: fixed;
}

#menu_button {
	position: relative;
	top: -75px;
	left: -600px;
	z-index: 2;
	width: auto;
	height: auto;
	padding: 10px;
	outline: none;
	border: none;
	background: #aaa;
	color: #fff;
	font-size: 200%;
}

#menu_button a {
    color:#fff;
    padding:10px;
    text-decoration:none;
    display:block;
    cursor:pointer;
    text-align:center;
    background:#aaa;
    line-height:100%;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
     border-bottom: none;
}

#menu_button a:hover {
	border-bottom: none;
}

#menu_button_wrap {
	position: relative; 
	top: 200px; 
	left: 25px;
	margin: 0;
	padding 0px;
	width: 100%;
	height: auto;
}


広告



ウィジェットエリアの追加

function.phpに以下を追記します。

function simple_widgets_init() {
	register_sidebar( array(
		'name' => __( 'Footer-Widget-1', 'my_handmade' ),
		'id' => 'footer-widget-1',
		'description' => __('Sidebar Widget Area.', 'my_handmade'),
		'before_widget' => '<div id="%1$s" class=" widget %2$s">',
		'after_widget' => '</div>',
	) );
}

フッター表示処理するファイルを作ります。

<!-- widget -->
<?php if ( is_active_sidebar( 'footer-widget-1' ) ) :
	dynamic_sidebar( 'footer-widget-1' );
else: ?>
	<div class="widget">
	<h2><?php 
		echo sprintf(__('No Widget', 'my_handmade') );
	 ?></h2>
	<p><?php 
		echo sprintf(__('Article does not exist', 'my_handmade'));
	 ?></p>
	</div>
<?php endif; ?>
<!-- /widget -->

ウィジェットを呼び出したい場所に以下を記述します。

<!-- widget -->
<div class="wrapper">
	<?php  get_template_part('footer_widget');  ?>
</div>
<!-- /footer widget -->

ページの作成年を取得する

function.phpに以下を追記します。

	// A function to display the creation year of copyright
	function copyright_year(){
		$getlatest = get_posts('numberposts=1&amp;post_type=any &amp; orderby=date');
		foreach($getlatest as $post): setup_postdata($post);
 		echo the_date('Y');
		endforeach;
	}


広告



ウィジェットタイトルの先頭に”!”が記載されているタイトルを非表示にする

function.phpに以下を追記します。

	// Hide the title of the specified widget
	add_filter( 'widget_title', 'remove_widget_title' );
	function remove_widget_title( $widget_title ) {
		if ( substr ( $widget_title, 0, 1 ) == '!' )
			return;
		else 
			return ( $widget_title );
	}

ショートコード関連

テキストウィジェットからもショートコードを呼び出すことができるようになります。

	// Short code to read php file
	function include_echo_php( $atts ){
		ob_start();
		get_template_part('template-parts/sample'); // Read "template-parts/sample.php"
		return ob_get_clean();
	}
	add_shortcode('include_echo' , 'include_echo_php');

	// Make short code available with widget
	add_filter('widget_text', 'do_shortcode');

	// Move PHP code with widget without using plugin in WordPress
	add_filter( 'widget_text', function( $ret ) {
		$php_file = 'sns';

		if( strpos( $ret, '[' . $php_file . ']' ) !== false ) {
			add_shortcode( $php_file, function() use ( $php_file ) {
				get_template_part( $php_file );
			});

			ob_start();
			do_shortcode( '[' . $php_file . ']' );
			$ret = ob_get_clean();
		}

		return $ret;
}	, 99 );


広告



各投稿や固定ページにカスタムCSSやカスタムJavascrioptを記載するエリアを追加する

	// Custom CSS Area
	add_action('admin_menu', 'custom_css_hooks');
	add_action('save_post', 'save_custom_css');
	add_action('wp_head','insert_custom_css');
	function custom_css_hooks() {
		add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'post', 'normal', 'high');
		add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'page', 'normal', 'high');
	}
	function custom_css_input() {
		global $post;
		echo '<input type="hidden" name="custom_css_noncename" id="custom_css_noncename" value="'.wp_create_nonce('custom-css').'" />';
	echo '<textarea name="custom_css" id="custom_css" rows="5" cols="30" style="width:100%;">'.get_post_meta($post->ID,'_custom_css',true).'</textarea>';
	}
	function save_custom_css($post_id) {
		if (!wp_verify_nonce($_POST['custom_css_noncename'], 'custom-css')) return $post_id;
		if (defined('DOING_AUTOSAVE') &amp;&amp; DOING_AUTOSAVE) return $post_id;
		$custom_css = $_POST['custom_css'];
		update_post_meta($post_id, '_custom_css', $custom_css);
	}
	function insert_custom_css() {
		if (is_page() || is_single()) {
			if (have_posts()) : while (have_posts()) : the_post();
				echo '<style type="text/css">'.get_post_meta(get_the_ID(), '_custom_css', true).'</style>';
			endwhile; endif;
			rewind_posts();
		}
	}

	// Custom JS Area
	add_action('admin_menu', 'custom_js_hooks');
	add_action('save_post', 'save_custom_js');
	add_action('wp_head','insert_custom_js');
	function custom_js_hooks() {
		add_meta_box('custom_js', 'Custom JS', 'custom_js_input', 'post', 'normal', 'high');
		add_meta_box('custom_js', 'Custom JS', 'custom_js_input', 'page', 'normal', 'high');
	}
	function custom_js_input() {
		global $post;
		echo '<input type="hidden" name="custom_js_noncename" id="custom_js_noncename" value="'.wp_create_nonce('custom-js').'" />';
		echo '<textarea name="custom_js" id="custom_js" rows="5" cols="30" style="width:100%;">'.get_post_meta($post->ID,'_custom_js',true).'</textarea>';
	}
	function save_custom_js($post_id) {
		if (!wp_verify_nonce($_POST['custom_js_noncename'], 'custom-js')) return $post_id;
		if (defined('DOING_AUTOSAVE') &amp;&amp; DOING_AUTOSAVE) return $post_id;
		$custom_js = $_POST['custom_js'];
		update_post_meta($post_id, '_custom_js', $custom_js);
	}
	function insert_custom_js() {
		if (is_page() || is_single()) {
			if (have_posts()) : while (have_posts()) : the_post();
				echo '<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript">'.get_post_meta(get_the_ID(), '_custom_js', true).'</script>';
			endwhile; endif;
			rewind_posts();
		}
	}

テキストウィジェットからSNSアイコンを表示してリンクをはる

sns.phpというファイルを作って、以下を記載します。

<a style="border:none;" href="https://twitter.com/naon_handmade"  target="_blank"><img src="<?php echo get_template_directory_uri(); ?>/images/Twitter.png" width=48px height=48px alt="Twitter"></a><a style="border:none;" href="https://www.instagram.com/naon_handmade/" target="_blank"><img src="<?php echo get_template_directory_uri(); ?>/images/Instagram.png" width=48px height=48px alt="Instagram"></a><a style="border:none;" href="https://plus.google.com/b/100094943846483470226/100094943846483470226" target="_blank"><img src="<?php echo get_template_directory_uri(); ?>/images/GooglePlus.png" width=48px height=48px alt="GooglPlus"></a>
 

テキストウィジェットに以下を記載します。※ショートコードです。

[sns]


広告





広告



関連記事

コメント

  • トラックバックは利用できません。

  • コメント (0)

  1. この記事へのコメントはありません。

コメントするためには、 ログイン してください。