先日、自宅のWindowsPCローカルにWordPressを入れた。
リンク埋め込みブログカード表示のカスタマイズについての備忘録。
URLを挿入すると、自動的に表示されるブログカードのデザインは以下。
はてなブログからインポートした記事には、アイキャッチ画像は入らない。
下のブログ名やシェアマークが不要なので、消したい。
≪ステップ１≫
「wp-includes\theme-compa」の下にある「embed-content.php」
\xampp\htdocs\wordpress\wp-includes\theme-compat\embed-content.php
から、以下の部分を削除。
<div class="wp-embed-footer"> <?php the_embed_site_title() ?> <div class="wp-embed-meta"> <?php /** * Prints additional meta content in the embed template. * * @since 4.4.0 */ do_action( 'embed_content_meta'); ?> </div> </div>
下のようにブログ名やシェアマークが消える。しかし、下に余分な余白ができる。
≪ステップ２≫
どこかのCSSで高さや余白を定義しているのかもと思ったが、「wp-includes\js」の下にある「wp-embed.min.js」でstyleを上書きしている模様。（※ 違うかもしれない。）
「wp-embed.min.js」を無効にするためには、 「wp-content\themes\テーマフォルダ 」の下にある「functions.php」
\xampp\htdocs\wordpress\wp-content\themes\semplicemente\functions.php
に、以下のソースを挿入。
function register_javascript() { wp_deregister_script('wp-embed'); wp_deregister_script('comment-reply'); } add_action('wp_enqueue_scripts', 'register_javascript');
すると、以下のようなデザインになる。余白は消えたが、デザインが変わって、要約部分も消えた。（※ この設定は一旦元に戻す。）
≪ステップ３≫
今度は、ブログカードをWordPress標準でないものを試してみる。
「Nomu×2.Net」にある「ショートコード」を使わせてもらう。とりあえず、以下のサイトを参考に、スクリプトとCSSをそのまま利用してみた。
（※ このショートコードによるブログカードはスマホでは表示されない模様。）
「wp-content\themes\テーマフォルダ 」の下にある「functions.php」
\xampp\htdocs\wordpress\wp-content\themes\semplicemente\functions.php
に、以下のコードを追加。
//ブログカードのレイアウトを生成
function nm_create_blogcard_layout($url, $title, $excerpt, $image_url, $site, $prefix) {
return '<a href="'. $url .'" class="'. $prefix .'-card" target="_blank" rel="noopener noreferrer">' .
'<div class="'. $prefix .'-card-box">' .
'<div class="'. $prefix .'-card-thumbnail">' .
'<img src="' . $image_url . '" alt="' . $title . '"/>' .
'</div>' .
'<div class="'. $prefix .'-card-content">' .
'<div class="'. $prefix .'-card-title">'. $title .' </div>' .
'<div class="'. $prefix .'-card-excerpt">'. $excerpt .'</div>' .
'<div class="'. $prefix .'-card-site">'. $site .'</div>' .
'</div>' .
'</div>' .
'</a>';
}
//記事の文章を抜粋して取得する
function nm_get_excerpt_post( $post_id, $length = 55 ) {
//指定された投稿を取得
$post = get_post( $post_id );
//投稿からショートコードを削除
$post_non_code_content = strip_shortcodes( $post->post_content );
//指定した文字列文返却する
return wp_trim_words($post_non_code_content, $length);
}
//ショートコード
function nm_create_blogcard($atts) {
//imageがない場合の画像の設定
$no_image = "";
//エラーになった時の文字を指定しておく
$err_msg = "<p>ブログカード取得失敗</p>";
//初期値を設定して連想配列($atts)を変数($url, $title, $excerpt)に変換
extract(shortcode_atts(array('url'=>"", 'title'=>"", 'excerpt'=>"", 'length'=>55, 'image_url'=>"", 'site'=>"", 'prefix'=>"nm" ), $atts));
//エラーチェック(urlが空の場合) エラー表示
if (empty($url)) return $err_msg;
//urlからpostIDを取得
$post_id = url_to_postid($url);
//タイトルの取得(title未設定の場合)
if (empty($title)) $title = esc_html(get_the_title($post_id));
//記事の抜粋
if (empty($excerpt)) $excerpt = esc_html(nm_get_excerpt_post($post_id, $length));
//指定イメージがない場合、アイキャッチ画像を取得する
if (empty($image_url)) {
//アイキャッチ存在チェック
if (has_post_thumbnail($post_id)) {
//アイキャッチ取得
$image = wp_get_attachment_image_src(get_post_thumbnail_id($post_id),'medium');
$image_url = $image[0];
} else {
$image_url = $no_image;
}
}
if (empty($site)) $site = $url;
//ブログカードのレイアウトを作成
$blogcard = nm_create_blogcard_layout($url, $title, $excerpt, $image_url, $site, $prefix);
//ショートコードを呼び出したところに挿入する場合、returnで返す。
return $blogcard;
}
add_shortcode("nmblogcard", "nm_create_blogcard");
外観テーマのカスタマイズで、「追加CSS」に、
以下のCSSを入れる。
a.nm-card {
border: 1px solid #e1e1e1;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
display: block;
padding: 20px;
position: relative;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
width: 100%;
text-decoration: none;
}
a.nm-card:hover {
box-shadow: none;
opacity: .8;
}
.nm-card-box {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
}
.nm-card-title {
font-size: 18px;
font-weight: 600;
color: #428bca;
padding-bottom: 5px;
}
.nm-card-thumbnail {
flex: 1;
margin-right: 15px;
padding-top: 5px;
}
.nm-card-thumbnail img {
width: 100%;
}
.nm-card-content {
flex: 2.5;
}
.nm-card-excerpt {
color: #808080;
font-size: 13px;
padding-bottom: 15px;
}
.nm-card-site {
border-top: dashed 1px #a4a4a4;
color: #b2b2b2;
font-size: 11px;
text-align:right;
padding-left: 5px;
}
.nm-card-site img {
margin-right: 5px;
vertical-align: bottom;
width: 20px;
}
@media (max-width: 980px) {
.nm-card-excerpt {
border: none;
}
}
@media (max-width: 640px) {
a.nm-card {
padding: 10px 10px 20px 10px;
}
.nm-card-thumbnail {
margin-right: 10px;
padding-top: 10px;
}
.nm-card-title {
font-size: 14px;
}
.nm-card-excerpt {
display: none;
}
}
ブログ記事に、次のようなショートコードを入れる。
[nmblogcard url="/wordpress/2022/07/26/2022-07-26-151742/"]
このショートコードには、以下のようなオプションも追加できるらしい。
[nmblogcard url="url" title="タイトル" excerpt="抜粋文" length=抜粋文字数 image_url="画像url" site="サイト" prefix="cssクラスprefix"]
ショートコードを入れると、以下のようなブログカードが表示される。リンク先の記事にアイキャッチ画像が設定されていないので、画像部分が表示されない。アイキャッチ画像は、後で設定する。
ブログ記事のショートコード部分には、以下のようなHTMLが挿入される。
アイキャッチ画像が設定されていないので、<img src="">が入っていない。
target="_blank"になっている点が評価できる。
（※ 以下の<pre></pre>内にhttp:を記入すると表示がおかしくなるので、わざと:を大文字にしている。）
<a href="/wordpress/2022/07/23/170/" class="nm-card" target="_blank" rel="noopener noreferrer"> <div class="nm-card-box"> <div class="nm-card-thumbnail"> <img src="" alt="兵庫県）今津駅→今津灯台→西宮神社→西宮駅。NEX-5R＋七工匠 7Artisans 18mm F6.3。"/> </div> <div class="nm-card-content"> <div class="nm-card-title">兵庫県）今津駅→今津灯台→西宮神社→西宮駅。NEX-5R＋七工匠 7Artisans 18mm F6.3。 </div> <div class="nm-card-excerpt">7月23日。阪神今津駅→今津灯台→西宮神社→西宮駅。5.6km、1時間30分。 カメラ「NEX-5R」＋レンズ…</div> <div class="nm-card-site">/wordpress/2022/07/23/170/</div> </div> </div> </a>
リンク先の記事にアイキャッチ画像を登録してみた。
上が先程作成したショートコード。下は標準のURL埋め込みリンク。
アイキャッチ画像が縦長だとブログカードの縦幅がかなり広がってしまう。
上が先程作成したショートコード。下は標準のURL埋め込みリンク。
ショートコード用の「追加CSS」の「.nm-card-thumbnail img」を書き換えてみた。
.nm-card-thumbnail img {
width: 100%;
}
↓↓↓
.nm-card-thumbnail img {
width:120px;
height:120px;
object-fit:cover;
}
これで画像が自動的に正方形で表示される。
次に、ショートコードのimage_urlの指定がない場合、ブログカードの画像ブロック自体を表示しないようにする。
[nmblogcard url="url" image_url="画像url"] [nmblogcard url="url"]
「wp-content\themes\semplicemente\functions.php」の 「nm_create_blogcard_layout()」を以下のようにカスタマイズする。
function nm_create_blogcard_layout($url, $title, $excerpt, $image_url, $site, $prefix) {
$blogcard = '<a href="'. $url .'" class="'. $prefix .'-card" target="_blank" rel="noopener noreferrer">' .
'<div class="'. $prefix .'-card-box">';
if ($image_url <> "") {
$blogcard .= '<div class="'. $prefix .'-card-thumbnail">' .
'<img src="' . $image_url . '" alt="' . $title . '"/>' .
'</div>';
}
$blogcard .= '<div class="'. $prefix .'-card-content">' .
'<div class="'. $prefix .'-card-title">'. $title .' </div>' .
'<div class="'. $prefix .'-card-excerpt">'. $excerpt .'</div>' .
'<div class="'. $prefix .'-card-site">'. $site .'</div>' .
'</div>' .
'</div>' .
'</a>';
return $blogcard;
}
[nmblogcard url="url" image_url="画像url"]
↓↓↓
[nmblogcard url="url"]
