embed

PHP

【WordPress】ブログカードのスタイル(css)を変更する方法

更新日:2023/03/09

WordPressが生成するブログカードはとてもシンプルです。
スタイルを変更すると、個性的なものに変更できます。

そこで今回は、ブログカードのスタイルを変更する方法をお伝えします。

 

変更方法

ブログカードのWebデータ生成時に、embed_headアクションが実行されます。
このアクションは、wp_headアクションのembed(ブログカード)版です。

このアクションでstyleタグを出力することで、ブログカードのスタイルを変更できます。

ただし既存のスタイルを上書きする必要があるので、可能な限り </head>の直前に出力できるようにアクションの優先順位を調整する必要があります。

 

コード例

WordPressのブログカードは、次のようなイメージで表示されます。

WordPressのブログカード

薄緑の枠は、Webページの背景です。
ブログカードではないので、変更対象外です。

このカードにスタイルを追加して、次のように変更してみます。

WordPressのブログカードの変更結果

センスはありません…例ということで…

次のコードを記述します。

add_action( 'embed_footer' ,function(){
?>
<style>
.wp-embed{
	background:silver;
}
p.wp-embed-heading{
	border-top: 3px solid black;
	border-bottom: 3px solid black;
	padding: 5px;
	background: white;
	text-align: center;
}
</style>
<?php
},999);

<style>と</style>の間に、cssを記述していきます。

これで、ブログカードに独自のスタイルが出力されます。

 

ブログカードのひな型

ブログカードのhtmlタグは次のようになっています。
複数のクラス名がセットされているものは、少し削除してあります。

スタイル設定の参考にしてください。

<div class="wp-embed">
	<p class="wp-embed-heading">
		<a href="リンク先URL" target="_top">
			Hello world!
		</a>
	</p>
	<div class="wp-embed-featured-image">
		<a href="リンク先URL" target="_top">
			<img src="画像URL" class="attachment-full size-full" alt="" decoding="async" loading="lazy" style="width:100%;height:82%;max-width:200px;" width="200" height="164">
		</a>
	</div>
		
	<div class="wp-embed-excerpt">
		<p>Hello world!</p>
	</div>
	<div class="wp-embed-footer">
		<div class="wp-embed-site-title">
			<a href="サイトURL" target="_top">
				<img src="サイト画像URL" srcset="サイト画像URL-150x150.jpg 2x" alt="" class="wp-embed-site-icon" width="32" height="32">
				<span>My Blog</span>
			</a>
		</div>
		<div class="wp-embed-meta">
			<div class="wp-embed-comments">
				<a href="コメントURL" target="_top">
					<span class="dashicons dashicons-admin-comments"></span>
					1 <span class="screen-reader-text">コメント</span>
				</a>
			</div>
			<div class="wp-embed-share">
				<button type="button" class="wp-embed-share-dialog-open" aria-label="共有ダイアログを開く">
					<span class="dashicons dashicons-share"></span>
				</button>
			</div>
		</div>
	</div>
</div>

WordPressはHTMやCSSの知識も必要。総合的な知識を身につけよう。

更新日:2023/03/09

書いた人(管理人):けーちゃん

スポンサーリンク

記事の内容について

null

こんにちはけーちゃんです。
説明するのって難しいですね。

「なんか言ってることおかしくない?」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。

掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。

ご意見、ご指摘はこちら。
https://note.affi-sapo-sv.com/info.php

 

このサイトは、リンクフリーです。大歓迎です。