Pjax Blog テーマのカスタマイズ:非同期画面遷移WordPress

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月

 

 

 

 

  • またまたこのサイトのSSL証明書が期限切れになった。 Kusanagi の自動更新ができていない。 それで手動であれこれしてみても、こんなエラーが出る。# kusanagi update cert Challenge failed for domain makotoiwasaki.com Challenge failed for domain www.makotoiwasaki.com Attempting to renew cert (makotoiwasaki.com) from /etc/letsencrypt/renewal/makotoiwasaki.com.conf produced an unexpected error: Some challenges hav...
  • Google の Indexing API を使うと、新しい投稿記事を瞬時にGoogleの検索エンジンに登録できる。 WordPress のプラグインとしてインデックスAPIが利用できる。使い方は英語だが、この通り: ⏱️ Get Google To Index Your Website Instantly Using the Indexing API ⚡Take a look at how you can use Google's new indexing API & to get your website's pages and content crawled instantly instead of waiting for Google to...
  • Yoast SEO を停止して、Rank Math SEO プラグインを使ってみたらGoogle の検索結果に表示される記事抜粋スニペットの文字数が短過ぎに見えてびっくりした。#1 Yoast Alternative You Deserve - Rank Math SEO vs. Yoast SEORank Math SEO plugin for WordPress is hands down the best Yoast alternative WordPress plugin. And the best thing is, Rank Math is completely FREE!Rank Math
  • WP_CRON を停止して、Linux の crontab に移行する設定をこれまでに何度も試みたがうまくいかなかった。 毎日バックアップされるはずの、UpdraftPlus プラグインのクロンが動いていない。やっと成功した設定方法を記録しておく。wp-config.php に次の行を追加する。define('DISABLE_WP_CRON', true);/var/spool/cron  に、  httpd という名前のファイルを作成し、次の1行を追加する。 所有者を httpd.www など、httpd nginx サーバーの稼働ユーザー名と同じにする。nginx.conf に書いてある。root@s4:/v...
  • Kusanagi WordPress プラットフォームでは Fcache とBcache がある。 Fcache とはNginx ヱブサーバーのキャッシュ機能であり、Kusanagi の独自機能ではない。Nginx のアクセスログを眺めていると、  BYPASS MISS EXPIRED のみで、HITが殆どない。 トップ頁、アーカイブリストの頁ではHIT、 個別投稿頁では、BYPASS MISS EXPIRED ばかりでHITがない。Kusanagi fcache on とすると、fcache は有効になったかのように思えるが、本当にキャッシュが効いているのかどうかはログで確認しないとわからない。まず、Wordpressの編集画面にログインし...
  • 目次1 HTTPD アクセスログの日本語化2 Logwatch も日本語化 HTTPD アクセスログの日本語化 Nginx,  Apache ヱブサーバーのアクセスログを見ると、日本語URLはエンコードされていて読めない。 そこで、デコードして表示させる。 ログのファイル名が ssl_access.log だとすると、tail -f ssl_access.log| perl -ne 'use URI::Escape; print uri_unescape($_);' tail -f access.log | php -R 'echo urldecode($argn)."\n";'で、日本語URlが読める状態で出力される。 Apa...
  • ヱブサイトの再構築中には、スタイルシート、style.css を頻繁に調整更新する。 CSSを追加、編集する度に再読み込みを繰り返して、変更の反映を確認していた。 これで編集者は反映を確認できるのだが、一般閲覧者はわざわざ再読み込みしたり、キャッシュを削除したりするはずはないので、変更が反映されていない崩れたデザインを見ているかもしれない。わざわざリロードしたりキャッシュを削除したりしなくても変更が確実に反映されるような設定方法を発見した。wp_enqueue_scripts で CSS、JS の読み込みを管理している場合には、次のようにfunctions.php に記述する。// 子テーマのstyle.cssを最後に読み込む add_acti...
  • 2679年8月25日

    頁カウンターの比較 WordPress

    WordPressで使える頁カウンターをいくつか同時に使ってカウントの仕方の違いを比べてみた。WP-PostViews    長期常用中 Post Views Counter  新規インストール Google Analytics Post Pageviews Pjaxblog の付属カウンター機能WP-PostViews は他のカウンターよりもカウントが多くなりがちなことに気づいた。一度のアクセスなのに2回カウントされることもあるようだ。ロボットクローラー Bots のリスト数も不十分に少ないような気がする。それで数が多くなりやすいのではないか。 それで Post Views Counter に乗り換えることにした。Post Views Cou...

WordPress カテゴリ人気記事 Views most

WordPress カテゴリ人気記事 月間

タグ関連記事

閲覧履歴

    //cookieが無い場合の処理