【プラグインなしWordPressブログリンクカード】CSSデザインが崩れるのをカスタマイズ！

2018年5月9日2019年4月28日

WordPressの記事内にURLをそのまま貼り付けると、はてなブログのようにリンクカードが表示される。

デザインも綺麗ですごくいいんだけど、CSSなど手を加えたいと思ったときに少しややこしい。あと使用しているテーマによってデザインが崩れたりもする。

せっかく標準装備でこんなにいいやつがあるんだから他のプラグインなどは使わずにこのまま使いたい。ということでカスタマイズしてレスポンシブな感じにしてみよう。

ちなみに「レスポンシブで画面からはみ出してしまう」という場合は簡単で、iframeにmax-widthを指定してやれば解決する。

iframe {max-width:100%;}

WordPressデフォルトリンクカードのCSSカスタマイズ

普通にスタイルシートに変更を加えるだけじゃカスタマイズできない。

できるだけ簡単にするためファイル等はダウンロードできるようにしておいた。

大まかな流れとしては以下のように進めていく。

my-pluginの作成と有効化

my-plugin.zip – ダウンロード

↑まずはこのzipファイルをダウンロードして解凍し、中身を確認したらFTPソフト等ファイルマネージャーで「wp-content/plugins/」内にアップロード。※僕が作った非公式ファイルなので自己責任でアップロードしてね。

アップロードすると「WordPressダッシュボード→プラグイン」に「my-plugin」というプラグインが表示されているのでそれを「有効化」。

この２ステップでリンクカードのCSSに手を加えることができるようになる。

zipファイルの中身はまず「my-plugin」というフォルダ、その中に「wp-embed-template.css」「my-plugin.php」の２つのファイルが入っていて、「wp-embed-template.css」に手を加えることでデザインの変更が反映されるようになる。

このあたりはこちらのブログを参考にさせてもらった。

WordPress 4.4 から 他サイトの記事を引用埋め込みできるようになった「Embed」｜ねんでぶろぐ

「wp-embed-template.css」に加えた変更点

「wp-embed-template.css」はWordPressをインストールするとデフォルトで「wp-includes/css/」に入っているファイルの一つ。

そのデフォルトテンプレート「wp-embed-template.css」の中身をそのまま複製して少し追記。具体的にはファイルの一番最後に以下のように付け加えた。

@media only screen and (max-width : 550px) {
p.wp-embed-heading {font-size:18px;}
.wp-embed-featured-image.square {float: none; max-width: 100%; margin-right: 0;}
.wp-embed-excerpt {display:none;}
.wp-embed-footer {margin-top: 0;}
}

ダウンロードせず自分でファイル作る場合

• ファイルをダウンロードしたくない
• 中身を自分で作りたい
• すでにmy-plugin作ってる

という人向けに以下、ファイルの中身と変更点を解説していく。

my-plugin.phpの中身

もう一つのファイル、my-plugin.phpの中身。

<?php
/*
Plugin Name: my-plugin
Plugin URI:
Description: My Plugin For WordPress.
Version: 1.0.0
Author:
Author URI:
License: GPL2
*/

if ( ! function_exists( 'nendebcom_plugin_last_load' ) ) :
/*
* my-plugin を最後に読み込むようにする。
*
* License: GPLv2 or later
*/
function nendebcom_plugin_last_load() {

$this_activeplugin  = '';
$this_plugin        = 'my-plugin/my-plugin.php';    //最後に読み込みたいプラグイン
$active_plugins     = get_option( 'active_plugins' );
$new_active_plugins = array();

foreach ( $active_plugins as $plugins ) {
if( $plugins != $this_plugin ){
$new_active_plugins[] = $plugins;
}else{
$this_activeplugin = $this_plugin;
}
}

if( $this_activeplugin ){
$new_active_plugins[] = $this_activeplugin;
}

if( ! empty( $new_active_plugins ) ){
update_option( 'active_plugins' ,  $new_active_plugins );
}
}
endif; // nendebcom_plugin_last_load
add_action( &quot;activated_plugin&quot;, &quot;nendebcom_plugin_last_load&quot; );

/*
* my-pluginの更新を非表示
*
* License: GPLv2 or later
*/
function nendebcom_hide_myplugin_updateplugin( $data ) {
if ( isset( $data-&gt;response['my-plugin/my-plugin.php'] ) ) {
unset( $data-&gt;response['my-plugin/my-plugin.php'] );
}
return $data;
}
add_filter( 'site_option__site_transient_update_plugins', 'nendebcom_hide_myplugin_updateplugin' );

/**
* embed用のCSSを my-plugin に設置したCSSの方を読込むように変更する
*
* @since WordPress 4.4.0
* License: GPLv2 or later
*/
function nendebcom_embed_styles(){
// Add wp-embed-template used in the original stylesheet.
wp_enqueue_style( 'wp-embed-template-org', plugin_dir_url( __FILE__ ) . 'wp-embed-template.css' );
}
add_filter( 'embed_head', 'nendebcom_embed_styles' );
// Remove wp-embed-template used in the main stylesheet.
remove_action( 'embed_head', 'print_embed_styles' );

/**
* アイキャッチ画像表示場所を固定
*
* Rectangular images are shown above the title
* while square images are shown next to the content.
*
* @since 4.4.0
*
* @param string $shape Thumbnail image shape. Either 'rectangular' or 'square'.
* License: GPLv2 or later
*/
add_filter( 'embed_thumbnail_image_shape', function(){ return 'square'; } );

前述のブログで解説されている通り合計４つの記述があり、それぞれ以下のような形になっている。

1. my-pluginを最後に読み込ませる
2. my-pluginの更新を非表示
3. リンクカードCSSをカスタマイズできるようにする
4. アイキャッチ画像場所の固定

「更新表示が出てきても別にいい」「ブログの読み込み速度が少しくらい遅くなってもいい」という人は前の２つは省略可。

アイキャッチが横長画像の場合は表示位置が変わる

ちなみにこのWordPressのデフォルトブログカード、アイキャッチ画像の縦横比によって画像の位置が変わるようになっている。

横長画像の場合はリンク記事タイトルの上部に、通常の四角っぽい形ならタイトル下に表示されるのだが、固定しておいた方がレスポンシブにしたときにややこしくないと思い固定した。もし表示箇所変わるままでいいならmy-plugin.phpの「アイキャッチ画像場所の固定」の記述もいらない。

気をつけないといけないのが横長画像を表示させる場合、小さいアイキャッチ画像を引き延ばしたような荒い画像になってしまうことがある。横長表示させたい場合は以下の記述もしておくといいだろう。

アイキャッチ画像が上側に表示されている時、たまたま縦横比によっては表示される画像が 「 medium(WIDE:300px) 」とかになってしまって 上部表示画像がぼやけた画像になってしまう事があります。
そんな場合は強制的に画像サイズを設定するアクションフィルターがあります。

以下のコードを my-plugin.php に張り付けてください。

/**
* 使用するアイキャッチ画像を設定
*
* @since 4.4.0
*
* @param string $image_size Thumbnail image size.
* License: GPLv2 or later
*/
add_filter( 'embed_thumbnail_image_size', function(){ return 'medium_large'; } );

※thumbnail、medium、medium_large 、large、full のどれかを入れてください。
※公式な情報ではありません。

WordPress 4.4 から 他サイトの記事を引用埋め込みできるようになった「Embed」｜ねんでぶろぐ

まとめ

リンクカードは他の「リンクカード系プラグイン」を使えばすぐに表示させることはできるけど、個人的にはこのWordPressのデフォルトのカードが気に入っている。URLをそのまま記事に打ち込めば勝手にリンクカードになるのも使い勝手がいいし。

以上、僕と同じようになんとかこのまま使いたいと思っていた人の参考になればうれしい。