Pjax で非同期画面遷移するWordpress テーマ Pjax Blog に変えてみた。
Pjax Blog テーマでは、Barba.js が使用されている。
画面遷移した時にデザインが崩れたりしていた。
カスタマイズして、デザインが落ち着くまでに12日かかった。
Pjax 機能を停止することもでき、それでも快速感はある。
Pjax をオンにしてもスタイルが大きく崩れなくなったのでしばらく継続使用してみる。
ストークテーマから1年7ヶ月で変更。
主なカスタマイズ内容
- oEmbed の停止
- サムネイル背景画像をLazyLoad する
- 頁全体の背景画像をページ毎に変更
- 投稿日時の表示方法の変更
- ヘッダーの幅変更
- ヘッダーメインメニューのモバイルタップ対応 Doubletaptogo
- Fixed ヘッダーの除去、非表示
- モバイルナビメニューの除去
- フロントページ用、投稿頁用、アーカイブ用に別個のサイドバーを設置。共用しない。
- PjaxカウンターにWP Postview のカウント数をインポートする。
- 記事の更新日時のリセット
- パーマリンクの構造変更、年月除去
oEmbed の停止
まずは、oEmbed を停止させるのに苦労した。
ストークの時の functions.php の設定が効かない。
ビジュアルエディターでの記事編集時に、oEmbed が適用されるのをなかなか停止できなかった。
functions.php に次を追加。
//タイルGallery関係の設定
function jeherve_custom_tiled_gallery_width() {
return '798';
}
add_filter( 'tiled_gallery_content_width', 'jeherve_custom_tiled_gallery_width' );
add_filter( 'jetpack_implode_frontend_css', '__return_false' );
add_filter('widget_text', 'do_shortcode' );
add_action( 'after_setup_theme', 'twentyseventeen_child_setup', 11 );
//generator を削除
remove_action('wp_head', 'wp_generator');
//EditURI を削除
remove_action('wp_head', 'rsd_link');
//wlwmanifest を削除
remove_action('wp_head', 'wlwmanifest_link');
// Embed WPのブログカード。他サイトのアイキャッチ画像や抜粋自動埋め込み
remove_action('wp_head', 'rest_output_link_wp_head');
remove_action('wp_head', 'wp_oembed_add_discovery_links');
remove_action('wp_head', 'wp_oembed_add_host_js');
remove_action('wp_head', 'wp_shortlink_wp_head');
//-----------------------------------------------------------------------------------
// oEmbed自動探知(discovery)機能を停止
//-----------------------------------------------------------------------------------
//コンテンツ表示時の自動oEmbedを停止
function ct_disable_autoembed(){
global $wp_embed;
remove_filter('the_content', array($wp_embed, 'autoembed'), 8);
remove_filter('widget_text_content', array($wp_embed, 'autoembed'), 8);
}
//エディター記入時の自動oEmbedを停止
add_action('init', 'ct_disable_autoembed');
function ct_unregister_mce_embed_url(){
wp_add_inline_script('mce-view', 'wp.mce.views.unregister("embedURL");');
}
add_action('init', 'ct_unregister_mce_embed_url');
// 管理画面絵文字削除
add_action('init', 'remove_action_emoji');
if ( !function_exists( 'remove_action_emoji' ) ):
function remove_action_emoji(){
remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('admin_print_scripts', 'print_emoji_detection_script');
remove_action('wp_print_styles', 'print_emoji_styles');
remove_action('admin_print_styles', 'print_emoji_styles');
remove_filter('the_content_feed', 'wp_staticize_emoji');
remove_filter('comment_text_rss', 'wp_staticize_emoji');
remove_filter('wp_mail', 'wp_staticize_emoji_for_email');
}
endif;//SRCSET の無効化//add_filter('max_srcset_image_width', create_function('', 'return 1;'));add_filter( 'wp_calculate_image_srcset_meta', '__return_null' );leapin-medium サイズのサムネイル作成 Regenerate
Pjax Blog テーマでは、テーマ独自のサムネイルサイズ、leapin-medium サイズの画像が多用されている。
このサイズのサムネイルが存在しない場合には、フルサイズの画像が表示されるので重たくなる。
そこで、まず最初にleapin-medium サイズのサムネイルを作成する。
次のコマンドで、全投稿記事のアイキャッチ画像のみの、leapin-medium サイズのみのサムネイルを作成することができる。
wp media regenerate --image_size=leapin-medium $(wp eval 'foreach( get_posts( array( "post_status" => "publish", "posts_per_page" => -1 ) ) as $id ) { echo get_post_thumbnail_id( $id ) . " "; }' )背景画像をLazyLoad する方法
このPjax Blogテーマでは背景画像が多用されている。
背景画像がLazyload されていないので、Lazyload 遅延読み込みするようにする。
Lazysizes 系の Lazy Loader プラグインをインストールしている前提で。
外観→ テーマエディターで、
class-leapin-query-posts.php (inc/query/class-leapin-query-posts.php)の403行目付近を次の赤文字のように編集する。
<?php
$img = leapin_get_eyecatch_image($thumbnail_size);
$thumb = $img[0];
if (!LEAPIN_AMP_Tags::is_amp()) {
// @todo concat ajax styles
echo "<style>.card__thumbnail.$thumb_id.lazyloaded::after{background-image: url($thumb)}</style>";
}
?> <div class="card__thumbnail <?php echo " " . $thumb_id; ?> lazyload" itemprop="image" itemscope itemtype="https://schema.org/ImageObject">lazyloaded、lazyload と2つ追加するだけでいい。
attachment.php の作成
attachment.php を次のように作成した。
<?php get_header(); ?>
<main id="main" aria-label="Main content" itemscope
itemprop="mainEntity" itemtype="https://schema.org/Blog">
<div id="main-in">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class('cf single'); ?> <?php echo implode(" ", apply_filters('leapin_single_custom_article_tag', [])); ?>
data-post_id="<?php the_ID(); ?>" role="article" itemprop="blogPost" itemscope
itemtype="http://schema.org/BlogPosting">
<?php do_action('leapin_loc_top_of_article'); ?>
<?php echo LEAPIN_Single_Tags::get_header('in_article'); ?>
<section class="entry-content cf" itemprop="articleBody">
<!-- widget area for above single content -->
<div class="above-single-content">
<?php if (is_active_sidebar('above_single_content') && !LEAPIN_AMP_Tags::is_amp()) : ?>
<?php dynamic_sidebar('above_single_content'); ?>
<?php endif; ?>
</div>
<?php
do_action('leapin_loc_single_above_content');
// the content (pretty self explanatory huh)
// the_content();
?>
<div class="container">
<div class="row">
<div class="col-lg-6" style="margin-bottom: 40px; padding: 0 50px 0 50px;">
<?php echo wp_get_attachment_link( get_the_ID(), 'medium' ); ?>
</div>
<div class="col-lg-6">
<div class="panel panel-primary" style="max-width: 500px; border-radius: 0px; margin-top: 0px; border: 3px solid #000;">
<div class="panel-heading" style="background: #000 !important; text-align: left; border-radius: 0px; border-bottom: 0px;"><strong><i class="fa fa-info-circle fa-lg"></i> Attachment information</strong></div>
<div class="panel-body" style="background-color: #fff;">
<ul class="fa-ul" style="text-align: left;">
<li><i class="fa-li fa fa-arrow-right"></i><strong>Title </strong>: <?php the_title(); ?></li>
<li><?php if ( has_excerpt() ) : ?><div class="entry-caption"><strong>Excerpt </strong>: <?php the_excerpt(); ?></div></li><?php endif; ?>
<li><i class="fa-li fa fa-arrow-right"></i><strong>Author name</strong> : <?php the_author(); ?></li>
<li><i class="fa-li fa fa-arrow-right"></i><strong>Post name</strong> : <a href="<?php echo get_permalink($post->post_parent); ?>"><?php
echo empty( $post->post_parent ) ? get_the_title( $post->ID ) : get_the_title( $post->post_parent );
?></a></li>
<li>
<?php
$meta = wp_get_attachment_metadata($id);
echo "Credit: ".$meta[image_meta][credit]."<br /> ";
echo "Camera: ".$meta[image_meta][camera]."<br />";
echo "Focal length: ".$meta[image_meta][focal_length]."<br />";
echo "Aperture: ".$meta[image_meta][aperture]."<br />";
echo "ISO: ".$meta[image_meta][iso]."<br />";
echo "Shutter speed: ".$meta[image_meta][shutter_speed]."<br />";
echo "Time Stamp: ".$meta[image_meta][created_timestamp]."<br />";
echo "Keyword: ".implode(", ", $meta[image_meta][keywords])."<br />";
echo "Copyright: ".$meta[image_meta][copyright];
?>
</li>
</ul>
</div> </div>
<p>Select your image size and download</p>
<p class='resolutions'> Downloads:
<?php
$images = array();
$image_sizes = get_intermediate_image_sizes();
array_unshift( $image_sizes, 'full' );
foreach( $image_sizes as $image_size ) {
$image = wp_get_attachment_image_src( get_the_ID(), $image_size );
$name = $image_size . ' (' . $image[1] . 'x' . $image[2] . ')';
$images[] = '<a href="' . $image[0] . '">' . $name . '</a>';
}
echo implode( ' | ', $images );
?>
</p>
</div>
</div></div>
<?php
do_action('leapin_loc_single_below_content');
if (!is_page()):
wp_link_pages(array(
'before' => '<div class="page-links">',
'after' => '</div>',
'link_before' => '<span>',
'link_after' => '</span>',
));
endif;
?>
</section> <?php // end article section ?>
<?php $footer_visible = LEAPIN_Single_Tags::is_article_footer_enable() ? "" : " sr-only"; ?>
<footer class="article-footer entry-footer<?php echo $footer_visible; ?>">
<h2 class="sr-only article-meta">Article Meta</h2>
<?php if (!is_page()): ?>
<div class="entry-meta">
<?php do_action('leapin_loc_article_top_of_footer') ?>
<div class="entry-cats-tags cf">
<?php // categories and tags ?>
<?php $hide_categories = leapin_mod_sr_only(LEAPIN_IDs::$leapin_hide_category_below_content); ?>
<?php printf('<p class="entry-categories' . $hide_categories . '"><span class="categories-title"><span class="categories" itemprop="keywords">%1$s</span>', get_the_category_list(', ')); ?>
<?php $hide_tags = leapin_mod_sr_only(LEAPIN_IDs::$leapin_hide_tag_below_content); ?>
<?php the_tags('<p class="entry-tags' . $hide_tags . '" itemprop="keywords">', ', ', '</p>'); ?>
<?php // categories and tags end ?>
</div>
<!-- widget area for above single footer content -->
<div id="above-single-footer-meta">
<?php if (is_active_sidebar('above_single_footer_meta') && !LEAPIN_AMP_Tags::is_amp()) : ?>
<?php dynamic_sidebar('above_single_footer_meta'); ?>
<?php endif; ?>
</div>
<?php // next and prev post tags ?>
<?php echo leapin_get_neighbor_posts_tag(); ?>
<?php // next and prev post tags end ?>
<?php // author info ?>
<?php $hide_author_section = leapin_mod_sr_only(LEAPIN_IDs::$leapin_hide_author_section_below_content); ?>
<h3 class="widget-title sr-only"><?php _e('Author', 'pjax-blog'); ?></h3>
<?php LEAPIN_Single_Tags::get_author_section($hide_author_section); ?>
<?php // end author info ?>
<?php // comments ?>
<?php if (!LEAPIN_AMP_Tags::is_amp()
&& leapin_is_comment_open()): ?>
<div class="entry-comments">
<!--コメント表示・非表示-->
<!-- 折り畳み展開ポインタ -->
<div onclick="obj=document.getElementById('myopen').style; obj.display=(obj.display=='none')?'block':'none';">
<a style="cursor:pointer;"><span class="comment-on">💬 ▼ コメント欄表示 ▽</span></a>
</div>
<!--// 折り畳み展開ポインタ -->
<!-- 折り畳まれ部分 -->
<div id="myopen" style="display:none;clear:both;">
<?php comments_template(); ?>
</div>
<!--// 折り畳まれ部分 -->
<!--コメント表示・非表示-->
</div>
<?php endif; ?>
<?php // end comments ?>
<?php // publisher markup for better SEO ?>
<?php LEAPIN_Single_Tags::the_publisher_markup(); ?>
<?php // end publisher markup ?>
</div>
<?php endif; ?>
<!-- widget area for below single content -->
<div id="below-single-content">
<?php if (is_active_sidebar('below_single_content') && !LEAPIN_AMP_Tags::is_amp()) : ?>
<?php dynamic_sidebar('below_single_content'); ?>
<?php endif; ?>
</div>
<?php do_action('leapin_loc_article_end_of_footer'); ?>
</footer> <?php // end article footer ?>
<?php do_action('leapin_loc_end_of_article'); ?>
</article> <?php // end article ?>
<?php endwhile; ?>
<?php else : ?>
<?php get_template_part('inc/template_parts/not_found'); ?>
<?php endif; ?>
</div>
</main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
is_mobile 関数の追加
Pjax-blog テーマでは、is_mobile 関数が定義されていないので追加する。
functions.php:
// is_mobile
function is_mobile(){
$useragents = array(
'iPhone',
'iPod',
'Android.*Mobile',
'Windows.*Phone',
'dream',
'CUPCAKE',
'blackberry9500',
'blackberry9530',
'blackberry9520',
'blackberry9550',
'blackberry9800',
'webOS',
'incognito',
'webmate'
);
$pattern = '/'.implode('|', $useragents).'/i';
return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}
頁毎に異なる背景画像を設定する
これまでと同じように、ページごとに異なる背景画像を設定した。
普通にやると背景画像が表示されない。
.barba-container::before
に背景画像を設定しないとうまく表示されない。
モバイルchrome でもボケずに表示できるようになる。
header.php の41行目付近から、次の様に編集。
<?php // wordpress head functions ?>
<?php wp_head(); ?>
<?php // end of wordpress head ?>
<?php
do_action('leapin_loc_end_of_head');
?>
<?php
// アイキャチを背景画像に設定 header.php /////////////////////////////////////////
global $wp_query;
$postid = $wp_query->post->ID;
?>
<?php if(is_singular()):?>
<?php
$thumbnail_id = get_post_thumbnail_id($post->ID); // アタッチメント情報のidを取得 // 画像の幅が640以上の時のみ表示
if (is_mobile()):
$image = wp_get_attachment_image_src($thumbnail_id, 'mb_background'); // アイキャッチ画像の情報を取得
else :
$image = wp_get_attachment_image_src($thumbnail_id, 'full'); // アイキャッチ画像の情報を取得
endif;
$src_full = $image[0]; // url
$width = $image[1]; // 横幅
$height = $image[2]; // 高さ
if($width > 800 && preg_match( "/.*?\.jpg|.*?\.jpeg/i", $src_full)){
// アイキャチ画像が設定されている場合
$image_url = $src_full;
$image_url_body_style = "style='background-image:url(".$image_url."); background-repeat: no-repeat; background-position: center center; background-size: cover; background-attachment: fixed; background-color: #006400;'"; // style設定文を作成
} else {
// アイキャチ画像が設定されていない場合、最初の画像
$first_img_full_url = catch_that_image_href_src();
$attachment_id = get_attachment_id_by_url( $first_img_full_url );
$first_img_full = wp_get_attachment_image_src($attachment_id, 'full'); // アイキャッチ画像FULLの3つの要素情報を取得
$src_full = $first_img_full[0]; // url
$first_img_full_url_width = $first_img_full[1]; // 横幅
$first_img_full_url_height =$first_img_full[2]; // 高さ
if($first_img_full_url_width > 800 && preg_match( "/.*?\.jpg|.*?\.jpeg/i", $src_full)){
$image_url = $src_full;
$image_url_body_style = "style='background-image:url(".$image_url."); background-repeat: no-repeat; background-position: center center; background-size: cover; background-attachment: fixed; background-color: #006400;'"; // style設定文を作成
}
}
// ランダムな記事のアイキャチ画像を背景に表示
if( empty( $image_url ) ){
$args = array( 'posts_per_page' => 1, 'orderby' => 'rand' );
$rand_posts = get_posts( $args );
foreach ( $rand_posts as $post ) :
setup_postdata( $post );
$image_id = get_post_thumbnail_id ($post->ID);
$random_image_url = wp_get_attachment_image_src ($image_id, 'full', true);
$src_full = $random_image_url[0];
$width = $random_image_url[1]; // 横幅
$height = $random_image_url[2]; // 高さ
if($width > 800 && preg_match( "/.*?\.jpg|.*?\.jpeg/i", $src_full)){
$image_url = $src_full;
$haikei_url = get_permalink();
$haikei_title = get_the_title();
$haikei_link_jump = "<div id=\"haikeilink\"><a href=\"$haikei_url\" class=\"haikeilink\">$haikei_title</a></div>\n";
$haikei_link_full = "<div id=\"haikeilink\">この背景画像の記事へ <br><a href=\"$haikei_url\" class=\"haikeilink\">$haikei_title</a></div>\n";
$image_url_body_style = "style='background-image:url(".$image_url."); background-repeat: no-repeat; background-position: center center; background-size: cover; background-attachment: fixed; background-color: #006400;'"; // style設定文を作成
}
endforeach;
wp_reset_postdata();
}
if( empty( $image_url ) ){
$image_url = 'https://makotoiwasaki.com/wp-content/themes/jstork_custom/rotate.php';
$image_url_body_style = "style='background-image:url(".$image_url."); background-repeat: no-repeat; background-position: center center; background-size: cover; background-attachment: fixed; background-color: #006400;'"; // style設定文を作成
}
// アイキャチを背景画像に設定、終 single post の場合 //////////////////////////////////////////////
?>
<?php elseif(is_category()): ?>
<?php
// ランダムな記事のアイキャチ画像を背景に表示 single 以外の頁 カテゴリ一覧ページ
$category_name = single_cat_title( '', false );
$category_id = get_cat_ID($category_name);
$args = array( 'cat' => $category_id, 'posts_per_page' => 1, 'orderby' => 'rand' );
$rand_posts = get_posts( $args );
foreach ( $rand_posts as $post ) :
setup_postdata( $post );
$image_id = get_post_thumbnail_id ($post->ID);
if (is_mobile()):
$random_image_url = wp_get_attachment_image_src ($image_id, 'mb_background', true);
else :
$random_image_url = wp_get_attachment_image_src ($image_id, 'full', true);
endif;
$src_full = $random_image_url[0];
$width = $random_image_url[1]; // 横幅
$height = $random_image_url[2]; // 高さ
if($width > 800 && preg_match( "/.*?\.jpg|.*?\.jpeg/i", $src_full)){
$image_url = $src_full;
$haikei_url = get_permalink();
$haikei_title = get_the_title();
$haikei_link_jump = "<div id=\"haikeilink\"><a href=\"$haikei_url\" class=\"haikeilink\">$haikei_title</a></div>\n";
$haikei_link_jump_2 = "<div id=\"haikeilink2\"><a href=\"$haikei_url\" class=\"haikeilink2\">$haikei_title</a></div>\n";
$haikei_link_full = "<div id=\"haikeilink\">この背景画像の記事へ <br><a href=\"$haikei_url\" class=\"haikeilink\">$haikei_title</a></div>\n";
$image_url_body_style = "style='background-image:url(".$image_url."); background-repeat: no-repeat; background-position: center center; background-size: cover; background-attachment: fixed; background-color: #006400;'"; // style設定文を作成
}
endforeach;
wp_reset_postdata();
if( empty( $image_url ) ){
$image_url = 'https://makotoiwasaki.com/wp-content/themes/jstork_custom/rotate.php';
$image_url_body_style = "style='background-image:url(".$image_url."); background-repeat: no-repeat; background-position: center center; background-size: cover; background-attachment: fixed; background-color: #006400;'"; // style設定文を作成
}
// アイキャチを背景画像に設定、終 カテゴリ一覧の場合 ////////////////////////////////////////////////////////////////////////////////////
?>
<?php else : ?>
<?php
/* シングルポストでもカテゴリ一覧でもないページの場合。home archive など*/
$post_id = get_the_ID();
?>
<?php
// ランダムな記事のアイキャチ画像を背景に表示 single カテゴリ一覧 以外の頁
$args = array( 'cat' => '16,11', 'posts_per_page' => 1, 'orderby' => 'rand' );
$rand_posts = get_posts( $args );
foreach ( $rand_posts as $post ) :
setup_postdata( $post );
$image_id = get_post_thumbnail_id ($post->ID);
if (is_mobile()):
$random_image_url = wp_get_attachment_image_src ($image_id, 'mb_background', true);
else :
$random_image_url = wp_get_attachment_image_src ($image_id, 'full', true);
endif;
$src_full = $random_image_url[0];
$width = $random_image_url[1]; // 横幅
$height = $random_image_url[2]; // 高さ
if($width > 800 && preg_match( "/.*?\.jpg|.*?\.jpeg/i", $src_full)){
$image_url = $src_full;
$haikei_url = get_permalink();
$haikei_title = get_the_title();
$haikei_link_jump = "<div id=\"haikeilink\"><a href=\"$haikei_url\" class=\"haikeilink\">$haikei_title</a></div>\n";
$haikei_link_jump_2 = "<div id=\"haikeilink2\"><a href=\"$haikei_url\" class=\"haikeilink2\">$haikei_title</a></div>\n";
$haikei_link_full = "<div id=\"haikeilink\">この背景画像の記事へ <br><a href=\"$haikei_url\" class=\"haikeilink\">$haikei_title</a></div>\n";
$image_url_body_style = "style='background-image:url(".$image_url."); background-repeat: no-repeat; background-position: center center; background-size: cover; background-attachment: fixed; background-color: #006400;'"; // style設定文を作成
}
endforeach;
wp_reset_postdata();
if( empty( $image_url ) ){
$image_url = 'https://makotoiwasaki.com/wp-content/themes/jstork_custom/rotate.php';
$image_url_body_style = "style='background-image:url(".$image_url."); background-repeat: no-repeat; background-position: center center; background-size: cover; background-attachment: fixed; background-color: #006400;'"; // style設定文を作成
}
// アイキャチを背景画像に設定、終 single post 以外の場合 home archive など ////////////////////////////////////////////////////////////
?>
<?php endif; ?>
<?php
if (!LEAPIN_AMP_Tags::is_amp()) {
add_filter('leapin_load_css_on_each_pjax', function ($css) use ($image_url) {
return $css . '.content-' . get_the_ID() . ' .main-thumbnail{background-image: url();}.barba-container::before{content:"";background-color:#003100;display:block;position:fixed;top:0;left:0;z-index:-1;width:100%;height:100vh;background:url("' . $image_url . '") center/cover no-repeat;-webkit-background-size:cover}.barba-container{background:none;}';
});
}
?>
<?php
/*<style type="text/css" id="custom-background-css">
// .barba-container.custom-background {
// background-image: url("<?php echo $image_url; ?>"); background-position: center center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; }
//</style>
<style type="text/css">
body::before {
content:"";
display:block;
position:fixed;
top:0;
left:0;
z-index:-1;
width:100%;
height:100vh;
background:url(<?php echo $image_url; ?>) center/cover no-repeat;
-webkit-background-size:cover;
}
body {background: #006400; margin: 0;}
</style>
*/
?>
</head>
<body <?php body_class(apply_filters('leapin_body_class', [])); ?>>
<div id="top"></div>
<?php
do_action('leapin_loc_top_of_body');
leapin_the_non_supported_ie_browser();
?>
<meta itemprop="accessibilityControl" content="fullKeyboardControl">
<meta itemprop="accessibilityControl" content="fullMouseControl">
<meta itemprop="accessibilityHazard" content="noFlashingHazard">
<meta itemprop="accessibilityHazard" content="noMotionSimulationHazard">
<meta itemprop="accessibilityHazard" content="noSoundHazard">
<meta itemprop="accessibilityAPI" content="ARIA">
<div id="container">
<div id="barba-wrapper" aria-live="polite">
<?php
$barba_ns = 'other';
if (is_home() || is_front_page()) {
$barba_ns = 'home';
} elseif (is_single()) {
$barba_ns = 'single';
} elseif (is_archive()) {
$barba_ns = 'archive';
}
?>
<div class="barba-container<?php echo leapin_bg_image(); ?>"
data-pjax_transition="<?php echo $inst->get(LEAPIN_IDs::$leapin_pjax_transition, LEAPIN_Theme_Mod::$default_leapin_pjax_transition); ?>"
data-namespace="<?php echo $barba_ns; ?>">
<div class="spinner-container">
<div class="three-dots-spinner">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
</div>
<header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
<?php
$transparent = $inst->get(LEAPIN_IDs::$leapin_header_transparent, false);
$transparent_header = $transparent && is_front_page() ? ' transparent' : '';
?>
<div id="inner-header" class="cf inner-header<?php echo $transparent_header ?>">
<?php
/*
<?php echo LEAPIN_Header::get_main_nav('fixed'); ?>
*/
?>
<?php echo LEAPIN_Header::get_main_nav2(); ?>
</div>
</header>
<?php $content_cls = "content-" . get_the_ID();
if(is_front_page()){
$content_cls .= ' front';
}else if(is_home()){
$content_cls .= ' home';
}
?>
<div id="content" class="<?php echo $content_cls; ?>">
<?php if (is_home() || is_front_page()): ?>
<?php echo LEAPIN_Custom_Header::getMedia(); ?>
<?php endif; ?>
<div id="above_container" class="above_container">
<!-- widget area for above container -->
<?php if (is_active_sidebar('above_container')) : ?>
<?php dynamic_sidebar('above_container'); ?>
<?php endif; ?>
</div>
<?php // display header when header style is "fullwidth" ?>
<?php echo LEAPIN_Single_Tags::get_header('in_head'); ?>
<div id="custom_header" >
<div class="wrap cf" style="opacity: 0;">
</div>
</div>
<div class="page-views">
<?php if(function_exists('the_views')) {
the_views();
} ?>
</div>
<?php if ($haikei_link_jump) : ?>
<div id="custom_header" class="dokore">
<div class="wrap cf" style="opacity: 80;">
<div class="header-text">
<p class="btn-wrap simple maru wow animated fadeInUp" data-wow-delay="1s">
<a href="<?php echo $haikei_url; ?>">どこれ？</a></p>
<?php echo $haikei_link_jump; ?>
</div>
</div>
</div>
<?php endif; ?>
<?php if ($haikei_link_jump) : ?>
<div id="custom_header" class="dokore2">
<div class="wrap cf" style="opacity: 80;">
<div class="header-text">
<p class="btn-wrap simple maru wow animated fadeInUp" data-wow-delay="1s">
<a href="<?php echo $haikei_url; ?>">どこれ？</a></p>
<?php echo $haikei_link_jump; ?>
</div>
</div>
</div>
<?php endif; ?>
そして、テーマカスタマイザーでも背景画像を設定しておく必要がある。そこで設定した画像は表示されないが、背景画像を表示するための必要なタグが挿入される。
モバイルタップ対応 Doubletaptogo
ヘッダー部分のメニューがダブルタップジャンプにならなくて苦労した。
フッターのメニューはダブルタップジャンプになるのに、ヘッダーメニューができなかった理由は、スクロールダウンした時に半透明で現れるFixed ヘッダーメニューと同じnav idになっていて重複していたからであった。
これを別々のIDになるようにするとダブルタップジャンプできるようになった。
その後、Fixed ヘッダーメニューは除去した。
inc/header/header.php の282行目付近に次を挿入した。
get_main_nav2 が、header.php から呼び出されるようにする。
public static function get_main_nav2($position = 'header')
{
$fix = $position == 'fixed' ? ' fixed' : ' rel';
ob_start();
?>
<div class="main-header cf<?php echo $fix; ?>">
<div class="main-header-wrapper">
<?php echo LEAPIN_Header::leapin_logo($position); ?>
<div class="main-header-inner">
<?php if ( is_home() || is_front_page() ) : ?>
<nav id="h_nav" class="frontpage" role="navigation">
<?php else : ?>
<nav id="h_nav" role="navigation">
<?php endif; ?>
<?php wp_nav_menu(array(
'container' => false,
'container_class' => 'menu cf headernavi',
'container_id' => 'nav_2',
'menu' => __( 'グローバルナビ' ),
'menu_class' => 'nav top-nav cf clearfix headernavi',
'theme_location' => 'header-menu',
'items_wrap' => '<ul id="nav_2_ul" class="%2$s">%3$s</ul>',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'depth' => 0,
'fallback_cb' => ''
)); ?>
</nav>
<!-- jQueryプラグイン「doubletaptogo.js」をドロップダウンメニューのhtmlコード以下で読み込む-->
<!--「#nav li」要素に「ul」要素を持つメニューに適用 -->
<?php do_action('leapin_loc_on_main_header'); ?>
</div>
</div>
</div>
<?php
return ob_get_clean();
}
header.php のメニューを挿入する部分を次のように変更。
<?php
/*
<?php echo LEAPIN_Header::get_main_nav('fixed'); ?>
*/
?>
<?php echo LEAPIN_Header::get_main_nav2(); ?>メニュー部分のCSSは次の通り。
.nav li a {
color: #adff2f;
font-weight: 500;
border-radius: 1em;
background: linear-gradient(to bottom,#003100 0%,#00b100 100%);
text-shadow: 1px 1px 2px #003100;
line-height: 1em;
font-size: 1.2em;
width: max-content;
max-width: 9em;
border-bottom: 0;
padding: 7px 6px;
display: block;
text-decoration: none;
bottom: 0;
height: 37px;
vertical-align: middle;
justify-content: flex-end;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
}
nav#g_nav.frontpage li a {
background: transparent;
color: white;
font-weight: 800;
}
.nav > li > a:after {
content: "";
display: block;
margin: 5px auto 0;
width: 0;
height: 1px;
background: #eeeeee;
transition: .25s ease-out;
-webkit-transition: .25s ease-out;
-moz-transition: .25s ease-out;
-o-transition: .25s ease-out;
-ms-transition: .25s ease-out;
opacity: .5;
filter: alpha(opacity=50);
-ms-filter: "alpha(opacity=50)";
}
.nav > li > a:hover:after {
width: 100%;
}
.nav li li {
text-align: left;
}
.nav li ul.sub-menu li,
.nav li ul.children li {
position: relative;
overflow: hidden;
height: 0;
transition: .2s;
margin-bottom: -2px;
}
.nav li:hover > ul.sub-menu > li,
.nav li:hover > ul.children > li {
overflow: visible;
height: 37px;
border-bottom: 1px solid rgba(255,255,255,0.2);
}
.nav li ul.sub-menu li a,
.nav li ul.children li a {
display: block;
}
.nav li ul.sub-menu li a:hover,
.nav li ul.children li a:hover {
filter: alpha(opacity=80);
-ms-filter: "alpha(opacity=80)";
opacity: 0.8;
}
.nav li ul.sub-menu li:last-child a,
.nav li ul.children li:last-child a {
border-bottom: 0;
}
.nav li ul.sub-menu li ul,
.nav li ul.children li ul {
top: 0;
left: 100%;
}
dl,
menu,
ol,
ul {
margin: 0em 0;
}
.nav li ul.sub-menu li a,
.nav li ul.children li a {
display: block;
background-color: rgba(0,100,0,0.6);
color: #adff2f !important;
max-width: max-content;
-webkit-writing-mode: unset;
-ms-writing-mode: unset;
writing-mode: lr;
}
.nav li ul.sub-menu li a{color: #f7f7f7;}
.nav li:hover > ul.sub-menu > li,
.nav li:hover > ul.children > li {
overflow: visible;
height: auto;
border-bottom: none;
}
#g_nav ul.sub-menu li ul.sub-menu li {
position: relative;
left: 2em;
}
.nav > li {
margin: auto 0;
}
@media only screen and (max-width: 836px) {
.nav > li > a:hover:after {
width: 100%;
}
.nav li a {
font-size: .9em;
padding: 10px 5px;
}
#h_nav ul {
width: 391px;
}
}
@media only screen and (max-width: 480px) {
.nav > li > a:after {
margin: 0px auto 0;
}
.nav li a {
font-size: 0.8em;
padding: 4px 4px;
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
}
.nav li ul.sub-menu li a, .nav li ul.children li a {
-webkit-writing-mode: unset;
-ms-writing-mode: unset;
writing-mode: lr;
}
}
/* */
#h_nav {
margin-left: 1em;
display: flex;
height: 37px;
text-align: right;
white-space: nowrap;
/* margin-right: 7em; */
flex-wrap: nowrap;
justify-content: flex-end;
/* max-width: 388px; */
/* overflow: hidden; */
}
#h_nav ul {
/* margin: 0 auto; */
/* width: 374px; */
white-space: nowrap;
display: flex;
flex-wrap: nowrap;
/* justify-content: flex-end; */
}
#h_nav ul li ul li a:hover {
filter: alpha(opacity=80);
-ms-filter: "alpha(opacity=80)";
opacity: 0.8;
}
#h_nav ul li ul li {
width: 9em;
}
#h_nav ul li ul li a {
font-weight:normal;
font-variant: small-caps;
height: auto;
padding: 6px;
}
#h_nav ul li {
/* float: left; */
white-space: nowrap;
justify-content: flex-end;
}
#h_nav ul li a {
/* padding: 10px 10px; */
/* height: auto; */
}
#h_nav li{
position:relative;
float:left;
padding: 0;
}
#h_nav ul li ul, #h_nav:hover ul li ul, #h_nav:hover ul li:hover ul li ul{
display:none;
list-style-type:none;
width: 9em;
}
#h_nav:hover ul, #h_nav:hover ul li:hover ul, #h_nav:hover ul li:hover ul li:hover ul {
display:block;}
#h_nav:hover ul li:hover ul li:hover ul {
position: absolute;
margin-left: 145px;
margin-top: -22px;
font: 10px;
}
#h_nav:hover ul li:hover ul {
position: absolute;
margin-top: 1px;
font: 10px;
}
#h_nav>ul>li:hover>ul {
border-bottom: 1px solid transparent
}
#h_nav ul.sub-menu li ul.sub-menu li {
position: relative;
right: 14em;
bottom: -1.8em;
}
@media only screen and (max-width: 480px) {
#h_nav ul li a {
font-size: 0.8em;
padding: 4px 4px;
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
width: 20px;
/* vertical-align: middle; */
text-align: center;
}
#h_nav ul li ul li a {
font-weight:normal;
font-variant: small-caps;
padding: 4px 4px;
-webkit-writing-mode: unset;
-ms-writing-mode: unset;
writing-mode: lr;
width: auto;
}
#h_nav ul {
width: 208px;
}
.nav > li > a:after {
display: none;
}
}
nav#h_nav.frontpage {
background: transparent;
color: white;
font-weight: 800;
}
nav#h_nav.frontpage li a {
background: transparent;
color: white;
font-weight: 800;
}
#h_nav a:hover {
background: #00b100;
}
/* ÃÆ*/
#f_nav ul {
margin: 0 auto;
width: 34em;
width: max-content;
max-width: 34em;
}
#f_nav {
margin: 0 auto;
width: max-content;
display: block;
background: black;
width: 100%;
/* margin: 0 auto; */
}
#f_nav a {
}
#f_nav a:hover {background: #00b100;}
#f_nav ul li ul li a:hover {
background: #00b100;
}
#f_nav ul li ul li {
width: 9em;
}
#f_nav ul li ul li a {
font-weight:normal;
font-variant: small-caps;
height: auto;
padding: 6px;
}
#f_nav ul li {
float: left;
}
#f_nav ul li a {
padding: 10px 10px;
}
#f_nav li{
position:relative;
float:left;
padding: 0;
}
#f_nav ul li ul, #f_nav:hover ul li ul, #f_nav:hover ul li:hover ul li ul{
display:none;
list-style-type:none;
width: 9em;
}
#f_nav:hover ul, #f_nav:hover ul li:hover ul, #f_nav:hover ul li:hover ul li:hover ul {
display:block;}
#f_nav:hover ul li:hover ul li:hover ul {
position: absolute;
margin-left: 145px;
margin-top: -22px;
font: 10px;
}
#f_nav:hover ul li:hover ul {
position: absolute;
margin-top: 1px;
font: 10px;
}
#f_nav>ul>li:hover>ul {
bottom:100%;
border-bottom: 1px solid transparent
}
#f_nav ul.sub-menu li ul.sub-menu li {
position: relative;
right: 14em;
bottom: -1.8em;
}
@media only screen and (max-width: 480px) {
#f_nav ul li a {
font-size: 0.8em;
padding: 5px 6px;
}
}
Pjax をオフにしないと Doubletaptogo は機能しない
スマホ Mobile 閲覧者に対してPjax をオフにするには、
「Pjax Blog セッティング」→「ページアニメーション」
で、「Pjax 有効化のための最小画面幅(px)」の数値を上げる。
800～
PjaxカウンターにWP Postview のカウント数をインポートする
Pjax-blog テーマでは独自に頁表示数のカウントを行っている。
WP-PostViews プラグインと同じ様に、wp_posts テーブルの中に、meta_key=post_views_count
として記録されている。
このカウント数を0から始めるのではなく、 既存のWP-PostViews のカウント数と同じにしたい。
データーベースのバックアップをしておく。
まずは、既に作成された、この meta_key=post_views_count
を削除する。
phpmyadmin 等で次のSQLコマンドを実行する。
DELETE FROM wp_postmeta WHERE meta_key = 'post_views_count'
Post Views Counter プラグインをインストールする。
プラグインエディターで、
post-views-counter/includes/settings.php
の603行目付近を次のようにコピペ編集する。
foreach ( $views as $view ) {
$sql[] = "(null," . $view['post_id'] . ", 'post_views_count', " . $view['meta_value'] . ")";
}
$wpdb->query( "INSERT INTO " . $wpdb->prefix . "postmeta(meta_id, post_id, meta_key, meta_value) VALUES " . implode( ',', $sql ) . " ON DUPLICATE KEY UPDATE meta_value = " . (isset( $_POST['post_views_counter_import_wp_postviews_override'] ) ? '' : 'count + ') . "VALUES(meta_value)" );
Post Views Counter の設定画面で、下の方に、
Tools Override existing views data.Import post views data from WP-PostViews plugin.
という項目があるので、チェックして、インポート実行する。
これで、カウント数がWP-PostViewsと同じになった。
Post Views Counter プラグインは、WP-PostViews の代わりに継続使用するか、削除してもよい。
データーベースにwp_post_views というテーブルが作成され、そこに表示数が記録されている。
Pjax ページ遷移時のタグの置換
カスタマイザーのページアニメーションの設定、「Pjax ページ遷移時のタグの置換」の欄に次を追加した。投稿頁とアーカイブ頁、トップ頁で読み込むJSが異なる場合にはこの設定を追加しないと動かなかったり、スタイルが乱れたりする。
script#doubletaptogo script#pop-tabs script#photoswipe-lib script#photoswipe-ui-default script#photoswipe-frontend script#toc-front style#photoswipe-lib-css style#photoswipe-skin-css style#lazy-load-photoswipe-lib-css style#lazy-load-photoswipe-skin-css style#toc-screen-css style#lazy-load-toc-screen-css .pswp
Pjax ヰジェット、投稿一覧は表示順にできない
利用できるヰジェットに、「Pjax-blog 投稿一覧」が追加され、数種類のスタイルで投稿リストを表示することができる。
これで「表示回数」順（人気順）に設定しても新着順のまま変わらない。順番を並び替えることはできない。
全記事の更新日時をリセット
パーマリンクの構造変更
パーマリンクに年月が入っていたのを、除去した。
年月アーカイブのパーマリンクを皇紀・日本暦年で表示できるようにした。
戦場ヶ原, 日光, 6月