1,301
https://makotoiwasaki.com

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

WordPress

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

 

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

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

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

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

 

標準画像として、

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

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

 

Random Image Rotation
Readers return to sites that appear fresh and new on each visit. On a news site, magazine, or blog, stories or headlines will be updated frequently. But how can static sites keep that fresh feeling…
A List Apart
 
https://alistapart.com/article/randomizer

 

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

 

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

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

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

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

 

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

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

 

 

header.php を編集

１．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 を編集

２．次に 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、mobile、WordPress等、お得な情報が満載
信旅
 
https://makotoiwasaki.com/

 

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

 

関数リファレンス/get children - WordPress Codex 日本語版
wpdocs.osdn.jp
 
https://wpdocs.osdn.jp/関数リファレンス/get_children#Examples

 

 

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

 

以上で、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 にしているとトップページの背景画像が更新されない、表示が乱れることがあるので注意。

 

Kusanagi のキャッシュbcache をオンにするとモバイル表示が崩れる
Kusanagi のキャッシュには2種類ある。bcache と fcache fcache はNginx サーバーによるキャッシュ機能。bcache は WordPress によるキャッシュ機能。このキャッシュ機能を有効にするには、 SSHでサーバーにログインして、kusanagi bcache onkusanagi fcache onキャッシュ機能を無効にするには、kusanagi bcache offkusanagi fcache offキャッシュされた内容を削除するにはkusanagi bcache clearkusanagi fcache clearとする。 ところが、bcache のみを on にした場合でも 、fcache on にして、両方オンにしても、PCの表示は崩れ...
信旅
 
https://makotoiwasaki.com/kusanagi-bcache.html

 

 

  • 6
    2685年6月4日
    WordPress

    VPSの移転方法

    VPSメモリ：2GB月額1,530円～CPU 3CoreNVMe SSD 150GB から、 メモリ：2GB 月額690円～ CPU2Core NVMe SSD50GBに移転成功した。朝から5時間ぐらいかかって落ち着いた感じ。 移転の動機は、年間支出削減。8,544円/年 で、さらに、30％をキャッシュバックのキャンペーンだったから。同一の会社だがサービスグレードの違いのみの新規追加VPS契約した。まずs1 からs2(移転先サーバー 192.168.1.2)にSSHログインできるようにする。# s1でSSH鍵生成（まだなければ）ssh-keygen -t rsa -b 4096# Enterキーを3回押してデフォルト設定 # s2に公開鍵をコピ...
    ... >> つづき
  • 116
    2679年11月5日
    WordPress

    Let’s Encrypt SSL証明書の期限切れ対策 certbot を使う

    またまたこのサイトの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...
    ... >> つづき
  • 226
    2679年9月3日
    WordPress

    Google Indexing API プラグイン WordPress by Rank Math

    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...
    ... >> つづき
  • 20
    2679年9月3日
    WordPress

    検索結果スニペット、抜粋 get_the_excerpt の設定

    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
    ... >> つづき
  • 11
    2679年8月29日
    WordPress

    WP_CRON を停止して Linux crontab で自動バックアップする方法

    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...
    ... >> つづき
  • 112
    2679年8月29日
    WordPress

    Nginx の Fcache が効いていない時に効かせる方法

    Kusanagi WordPress プラットフォームでは Fcache とBcache がある。 Fcache とはNginx ヱブサーバーのキャッシュ機能であり、Kusanagi の独自機能ではない。Nginx のアクセスログを眺めていると、  BYPASS MISS EXPIRED のみで、HITが殆どない。 トップ頁、アーカイブリストの頁ではHIT、 個別投稿頁では、BYPASS MISS EXPIRED ばかりでHITがない。Kusanagi fcache on とすると、fcache は有効になったかのように思えるが、本当にキャッシュが効いているのかどうかはログで確認しないとわからない。まず、Wordpressの編集画面にログインし...
    ... >> つづき
  • 330
    2679年8月25日
    WordPress

    httpdアクセスログを日本語デコードする方法

    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が読める状態で出力される。 Apacheのログをデコードする方法 - Life with ITプログラマ x ...
    ... >> つづき
  • 25
    2679年8月25日
    WordPress

    リロードなしにスタイルシートの更新を反映させる方法

    ヱブサイトの再構築中には、スタイルシート、style.css を頻繁に調整更新する。 CSSを追加、編集する度に再読み込みを繰り返して、変更の反映を確認していた。 これで編集者は反映を確認できるのだが、一般閲覧者はわざわざ再読み込みしたり、キャッシュを削除したりするはずはないので、変更が反映されていない崩れたデザインを見ているかもしれない。わざわざリロードしたりキャッシュを削除したりしなくても変更が確実に反映されるような設定方法を発見した。wp_enqueue_scripts で CSS、JS の読み込みを管理している場合には、次のようにfunctions.php に記述する。// 子テーマのstyle.cssを最後に読み込む add_acti...
    ... >> つづき

WordPress カテゴリ人気記事 Views most

タグ関連記事

閲覧履歴