WordPressのお勧めカスタマイズ
私がしているWordPressのカスタマイズの一部を紹介します。
広告
Contents
ページのトップへ戻るボタン
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&post_type=any & 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') && 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') && 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]
広告
広告
この記事へのコメントはありません。