アイキャッチ画像を背景画像にする方法 WordPress

個別の投稿記事のページで、それぞれの記事のアイキャッチ画像を背景画像に設定するにはどうすればよいか?

 

画像の幅が639px 以上で、PNG画像でない場合に背景に設定する。

アイキャチ画像がある場合はアイキャチ画像を、

アイキャチ画像が設定されていない場合は、本文中の最初の画像を、

その画像が小さすぎたり、PNG画像だったり、画像が全くなかったりした場合は、標準の背景画像を表示する。

 

標準画像として、

1.全投稿記事のアイキャチ画像からランダムにピックアップする。

2.それもだめなら、rotate.php を使用して、特定のフォルダ内の複数の背景画像からランダムに表示する。

 

 

表示される画像の順番、頁種類別

 

1.個別投稿記事のページ場合には、それぞれのアイキャチ画像が背景になり、

2.カテゴリーの一覧ページでは、その同じカテゴリーのランダムな記事のアイキャッチ画像が背景になり、

3.トップページ、アーカイブのページでは、最初の記事の画像が背景表示され、

4.その他のページではランダムな記事のアイキャッチ画像が背景になる。

 

画像が全くない記事の場合は、ランダムな記事のアイキャチ画像が表示される。

ランダム記事内にも画像がなければ、rotate.php のランダム画像が背景表示される。

 

 

header.php を編集

1.header.php の </head> のすぐ下 <body> タグの前に次を挿入する。

 

</head>

<?php
// アイキャチを背景画像に設定  header.php        /////////////////////////////////////////////
	global $wp_query;
	$postid = $wp_query->post->ID;
	$tai = get_post_meta($postid, 'singlepostlayout_radio', true);
	$tai = 'バイラル風(1カラム)';
?>

<?php if(is_singular('post')):?>
<?php
$thumbnail_id = get_post_thumbnail_id($post->ID); // アタッチメント情報のidを取得  // 画像の幅が640以上の時のみ表示
$image = wp_get_attachment_image_src($thumbnail_id, 'full'); // アイキャッチ画像の情報を取得
$src_full = $image[0]; // url
$width = $image[1]; // 横幅
$height = $image[2]; // 高さ

if($width > 639 && 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 > 639 && 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 > 639 && 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";
$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://myname.npn/wp-content/themes/mythem/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);
	$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 > 639 && 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";


$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://myname.npn/wp-content/themes/mythem/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
/* シングルポストでもカテゴリ一覧でもないページの場合。*/
$post_id = get_the_ID();
?>

<?php
// ランダムな記事のアイキャチ画像を背景に表示    single カテゴリ一覧 以外の頁

$args = array( 'cat' => $now_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);
	$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 > 639 && 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";

$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://myname.npn/wp-content/themes/mythem/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 endif; ?>


<body <?php echo $image_url_body_style; ?><?php body_class(); ?>>

 

functions.php を編集

2.次に functions.php に次を追加する。

//画像URLからIDを取得
function get_attachment_id_by_url( $url ) {
 global $wpdb;
 $sql = "SELECT ID FROM {$wpdb->posts} WHERE post_name = %s";
 preg_match( '/([^\/]+?)(-e\d+)?(-\d+x\d+)?(\.\w+)?$/', $url, $matches );
 $post_name = $matches[1];
 return ( int )$wpdb->get_var( $wpdb->prepare( $sql, $post_name ) );
}

//最初のリンク画像のFULLサイズのURLを取得 SRC   タイルギャラリーの画像も取得 //////////////////////////////////////////////////////////////////////////////////
function catch_that_image_href_src() {
 global $post;
$content = apply_filters( 'the_content', get_the_content() );
$content = str_replace( ']]>', ']]&gt;', $content );
 $first_img = '';
 $output = preg_match( '/<a href="([^"]+\.jpg)[^>]*>/i', $content, $matches );
 $first_img_src = $matches[1];
$attachment_id = get_attachment_id_by_url( $first_img_src );
$first_img_full = wp_get_attachment_image_src($attachment_id, 'full'); // 最初の画像FULLの情報を取得
$first_img_full_url = $first_img_full[0]; // url
$first_img_full_url_width = $first_img_full[1]; // 横幅
$first_img_full_url_height =$first_img_full[2]; // 高さ

if( empty( $first_img_full_url ) ){
 $first_img_full_url = 'https://myname.npn/wp-content/themes/mytheme/rotate.php';
 }
 return $first_img_full_url;
}

 

ランダムアイキャッチ画像の背景に、その記事へのリンクを表示

ついでにランダムな記事のアイキャチ画像が背景になった場合に、その記事へのリンクを表示するには、header.php に以下を挿入する。 body の下。

 

<body <?php echo $image_url_body_style; ?><?php body_class(); ?>> 
<?php if ($haikei_link_jump) : ?>
<div id="custom_header" class="dokore">
<script type="text/javascript">
jQuery(function( $ ) {
	$(window).load(function(){
	    $("#custom_header .wrap").css("opacity", "100");
	});
});
</script>

	<div class="wrap cf" style="opacity: 0;">
		<div class="header-text">
			<p class="btn-wrap simple maru wow animated fadeInUp" data-wow-delay="1s">
			<a style="color:;background:#006400; ?>;" href="<?php echo $haikei_url; ?>">どこれ?</a></p>
			<?php echo $haikei_link_jump; ?>
		</div>
	</div>
</div>	
<?php endif; ?>

 

どここれ? に答えるドコレボタンになった。

 

 

投稿に添付された最初の画像を表示 するのにこんな方法もあるようだ

 

 

 

スマホの背景画像が表示されない時

 

以上で、PC ではキチンと背景画像が全面に表示されるが、モバイル環境、スマホ、タブレットではぼやけたまましっかり表示されないという現象に陥った。

昔ははっきりと表示されていたような気がするが、今はとにかく表示されない。

アンドロイドの Chrome、 Edge では表示されない。

Firefox アプリではきちんと背景画像が表示されていた。

 

それで解決方法を探ると解決できた。

body::before で背景を設定し、body そのものでは背景画像を指定しないという方法。

Mobile と それ以外で条件分岐する。

上記の header.php を編集するところで、

</head> と<body>タグを除去し、代わりに次のコードと入れ替える。

 

<?php if (wp_is_mobile()):?>
<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: none; }
</style>

</head>
<body <?php body_class(); ?>>
<?php else : ?>
</head>
<body <?php echo $image_url_body_style; ?><?php body_class(); ?>>
<?php endif; ?>

 

これでモバイルのブラウザーでも背景画像がくっきりと表示されるようになった。

Firefox ではスクロール時にすこしガクつくような動きもあるがおおむね問題なし。

キャシュに注意

Kusanagi のキャッシュ、bcashe,  fcashe を on にしているとトップページの背景画像が更新されない、表示が乱れることがあるので注意。

 

 

 

  • Google の Indexing API を使うと、新しい投稿記事を瞬時にGoogleの検索エンジンに登録できる。 WordPress のプラグインとしてインデックスAPIが利用できる。使い方は英語 ...
  • Yoast SEO を停止して、Rank Math SEO プラグインを使ってみたらGoogle の検索結果に表示される記事抜粋スニペットの文字数が短過ぎに見えてびっくりした。#1 Yoast Alt ...
  • WP_CRON を停止して、Linux の crontab に移行する設定をこれまでに何度も試みたがうまくいかなかった。 毎日バックアップされるはずの、UpdraftPlus プラグインのクロンが動い ...
  • Kusanagi WordPress プラットフォームでは Fcache とBcache がある。 Fcache とはNginx ヱブサーバーのキャッシュ機能であり、Kusanagi の独自機能ではな ...
  • 目次 1 HTTPD アクセスログの日本語化 2 Logwatch も日本語化 HTTPD アクセスログの日本語化 Nginx,  Apache ヱブサーバーのアクセスログを見ると、日本語URLはエン ...
  • ヱブサイトの再構築中には、スタイルシート、style.css を頻繁に調整更新する。 CSSを追加、編集する度に再読み込みを繰り返して、変更の反映を確認していた。 これで編集者は反映を確認できるのだが ...
  • WordPressで使える頁カウンターをいくつか同時に使ってカウントの仕方の違いを比べてみた。WP-PostViews    長期常用中 Post Views Counter  新規インストール Go ...
  • Pjax で非同期画面遷移するWordpress テーマ Pjax Blog に変えてみた。 Pjax Blog テーマでは、Barba.js が使用されている。Pjax Blog | Unique ...

タグクラウド

WordPress カテゴリ人気記事 Views most

WordPress カテゴリ人気記事 月間

20171222

タグ関連記事

閲覧履歴

    //cookieが無い場合の処理
2019
GA-views: 340
20171222