WordPressのテーマ（テンプレート）をSimplicity からストークに変更して困ったのが Simplicity でいわゆるブログカードが、できなくなり、Wordpress 付属機能のoEmbed では表示されないことが多く、不安定になったこと。
リンクURLだけの行がそのままになり、見栄えが悪い。
Pz-LinkCard プラグインの存在は、すぐに知っていたが、これはショートコードのみでブログカードに変換されるものと思っていた。
試しにインストールしてみれば、ショートコードなしに、URLだけの行も変換できるし、文字列リンクだけの行もブログカードに変換できるオプションもあるというすぐれものであった。
これで過去の記事のURLだけの行も完璧にリンクカード＝ブログカードに変換されるようになった。
Pz-LinkCard プラグインをインストールした後、次のようにカスタマイズした。
oEmbed の無効化
WordPress の標準機能、oEmbed を無効化しないと、記事作成画面でURLを貼り付けた瞬間にoEmbedリンクカードに変換されてしまう。それを防止するには次を functions.php に追加する。
Simplicity のfunctions.php blogcard.php から移植した。
//はてな oEmbed対応
wp_oembed_add_provider('https://*', 'https://hatenablog.com/oembed');
//oembed無効
add_filter( 'embed_oembed_discover', '__return_false' );
//Embeds
remove_action( 'parse_query', 'wp_oembed_parse_query' );
remove_action( 'wp_head', 'wp_oembed_remove_discovery_links' );
remove_action( 'wp_head', 'wp_oembed_remove_host_js' );
//本文中のURLが内部リンクの場合にWordpressがoembedをしてしまうのを解除(WP4.5.3向けの対策)
remove_filter( 'pre_oembed_result', 'wp_filter_pre_oembed_result' );
ついでに、以下も追加した。これは Simple image size プラグインを削除するためでもある。
/* 画像関係 */
add_theme_support( 'post-thumbnails' );
if ( has_post_thumbnail() ) {
the_post_thumbnail( 'thumbnail' );
}
set_post_thumbnail_size( 150, 113, true );
/* サイズを複数設定 */
add_image_size( 'linkcard150x113', 150, 113, true );
add_image_size( 'linkcard175x116', 175, 116, true );
add_image_size( 'small', 70, 70, true );
add_image_size( 'medium_large', 300, 300, false );
add_image_size( 'thumb100', 100, 100, true );
add_image_size( 'thumbnail135', 133, 133, true );
add_image_size( 'thumb320_raw', 320, 0, false );
add_image_size( 'thumbnail-680', 680, 0, false );
add_image_size( 'thumb728', 728, 0, false );
add_image_size( 'wpp348x208', 348, 208, true );
add_image_size( 'slider-218x130', 218, 130, true );
add_image_size( 'post-thum', 175, 116, true );
add_image_size( 'home-thum', 486, 290, true );
function new_custom_sizes($sizes) {
return array_merge($sizes, array(
'thumb320_raw' => __('thumb320_raw'),
'wpp348x208' => __('wpp348x208'),
'thumb728' => __('thumb728'),
));
}
add_filter('image_size_names_choose', 'new_custom_sizes');CSS 追加カスタマイズ
リンクカード関連で追加したCSSはこんな感じになった。
.lkc-url {
color: #4466ff;
font-size: 10px;
line-height: 10px;
font-weight: normal;
text-decoration: underline;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
margin-left: 1em;
margin-top: 14px;
}
.lkc-excerpt {
color: #333333;
font-size: 0.8em;
line-height: 1.2em;
padding: 0;
margin: 0;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
text-align: justify;
max-width: 100%;
padding: 5px 5px 0;
line-height: 1.3em;
border-radius: 12px;
max-height: 4.5em;
}
.lkc-info {
padding: 0;
color: #222222;
font-size: 12px;
line-height: 12px;
overflow: hidden;
display: block;
float: left;
margin-top: 14px;
}
.lkc-share {
text-shadow: none;
margin-right: .6em;
}
.lkc-domain {
color: #222222;
font-size: 12px;
line-height: 12px;
text-decoration: none;
display: inline !important;
font-weight: 600;
}
.lkc-thumbnail-img {
width: auto;
max-height: 116px;
}
.entry-content a[target="_blank"]:after {
font-family: 'FontAwesome';
content: '\f08e';
font-size: 0.9em;
margin: 0 3px 0 2px;
display: inline-block;
}
p.wp-embed-kanren {
float: left;
background-color: #371b07;
color: white;
font-size: 0.8em;
font-weight: 500;
width: 2.5em;
display: inline-block;
text-align: center;
margin-right: 0.5em;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
}
div.lkc-external-wrap .wp-embed-kanren {
display: none;
}
@media screen and (max-width: 600px) {
.lkc-title {
font-size: 90%;
line-height: 90%;
}
.lkc-excerpt {
font-size: 80%;
}
.lkc-thumbnail {
max-width: 176px;
max-height: 116px;
}
.lkc-thumbnail-img {
max-width: 175px;
max-height: 116px;
}
}
@media screen and (max-width: 480px) {
.lkc-title {
font-size: 80%;
line-height: 80%;
}
.lkc-excerpt {
font-size: 65%;
}
.lkc-thumbnail {
max-width: 176px;
max-height: 116px;
}
.lkc-thumbnail-img {
max-width: 175px;
max-height: 116px;
}
}
@media screen and (max-width: 320px) {
.lkc-title {
font-size: 70%;
line-height: 70%;
}
.lkc-excerpt {
font-size: 50%;
}
.lkc-thumbnail {
max-width: 176px;
max-height: 116px;
}
.lkc-thumbnail-img {
max-width: 176px;
max-height: 116px;
}
}
pz-linkcard.php の編集
プラグイン編集で pz-linkcard/pz-linkcard.php
の1078行目あたりを次のように変更した。
linkcard150x113 を変更すれば、サムネイル画像のサイズを明確に指定できる。
$attach = wp_get_attachment_image_src( $thumbnail_id, 'linkcard150x113', true );
他にも編集したところがある。オリジナルの pz-linkcard.php との差分は次の通り。
/DocumentRoot/wp-content/plugins/pz-linkcard# diff pz-linkcard.php pz-linkcard.php.org
104c104
< 'thumbnail-api' => 'https://s.wordpress.com/mshots/v1/%URL%?w=150',
---
> 'thumbnail-api' => 'https://s.wordpress.com/mshots/v1/%URL%?w=100',
106,107c106,107
< 'thumbnail-width' => '150px',
< 'thumbnail-height' => '113px',
---
> 'thumbnail-width' => '100px',
> 'thumbnail-height' => '108px',
716,717c716
< $domain_info = '<div class="lkc-info">'.$a_op.'<span class="lkc-domain"'.$site_title.'>'.$favicon.' '.$site_name.$info.'</span>'.$a_cl.' '.$sns_info.$this->plugin_link.'</div><div class="lkc-url"><cite>'.$st_op.$a_op.$url.$st_cl.$a_cl.'</cite></div>';
<
---
> $domain_info = '<div class="lkc-info">'.$a_op.'<span class="lkc-domain"'.$site_title.'>'.$favicon.' '.$site_name.$info.'</span>'.$a_cl.' '.$sns_info.$this->plugin_link.'</div>';
729c728
< $content = '<div class="lkc-content-2">'.$a_op.$thumbnail.'<span class="lkc-title">'.$title.'</span>'.$a_cl.$sns_title.'<div class="lkc-excerpt">'.$excerpt.'</div></div>';
---
> $content = '<div class="lkc-content">'.$a_op.$thumbnail.'<span class="lkc-title">'.$title.'</span>'.$a_cl.$sns_title.'<div class="lkc-url"><cite>'.$st_op.$a_op.$url.$st_cl.$a_cl.'</cite></div><div class="lkc-excerpt">'.$excerpt.'</div></div>';
742c741
< $tag = $wrap_op.$a_op_all.'<div class="lkc-card"><p class="wp-embed-kanren">関連</p>'.$content.$domain_info.'<div class="clear"></div></div>'.$a_cl_all.$wrap_cl;
---
> $tag = $wrap_op.$a_op_all.'<div class="lkc-card">'.$content.$domain_info.'<div class="clear"></div></div>'.$a_cl_all.$wrap_cl;
1078c1077
< $attach = wp_get_attachment_image_src( $thumbnail_id, 'linkcard150x113', true );
---
> $attach = wp_get_attachment_image_src( $thumbnail_id, 'thumbnail', true );
1140d1138
< $str = preg_replace('/(https?|ftp)(:\/\/[-_.!~*\'()a-zA-Z0-9;\/?:\@&=+\$,%#]+)/', '', $str); //URLを取り除く
1478,1479c1476,1477
< $new_width = 150;
< $new_height = 113;
---
> $new_width = 100;
> $new_height = 100;
Pz-LinkCard の設定状況
リンクカード設定
Pz-LinkCard の設定状況は、現時点で左の通り。
追加CSSの直接編集で、ここの設定が無効になっている部分もある。
DBキャッシュ管理
Simplicity や他のブログカードにない機能として、リンクカードごとに内容がデーターベースに保存されていて、その抜粋文を編集するすることができる。
引用文を記事中の任意の部分からピックアップすることができる。
1つ不足しているかもしれない機能は、全てのカードのキャッシュを一括して削除することができないことである。
それと目的の記事を検索する機能がない。
Simplicity や Celtis Pack のリンクカード機能よりもずっと高機能で使いやすくカスタマイザブルである。
以上のカスタマイズでURL だけの行が以下のように表示されるようになった。
定形書式の比較ができる：
