WordPressのテーマ(テンプレート)をSimplicity からストークに変更して困ったのが Simplicity でいわゆるブログカードが、できなくなり、Wordpress 付属機能のoEmbed では表示されないことが多く、不安定になったこと。

リンクURLだけの行がそのままになり、見栄えが悪い。

 

関連

Wordpressテーマを Simplicity からStorkに変更したら
 Wordpressのテーマ(テンプレート)を Simplicity から Stork に変更してみた。テーマを変えてから放置できるくらい全体像が落ち着くまでに3週間かかった。 デザインの変更点は、 トップページにスライダー。(Stork 標準装備) 投稿ページごとに...

 

Pz-LinkCard プラグインの存在は、すぐに知っていたが、これはショートコードのみでブログカードに変換されるものと思っていた。

試しにインストールしてみれば、ショートコードなしに、URLだけの行も変換できるし、文字列リンクだけの行もブログカードに変換できるオプションもあるというすぐれものであった。

 

関連

WordPressでリンクをカード形式で表示する Pz-LinkCard
リンクをカード形式で表示させるWordPressプラグイン「Pz-LinkCard」を公式プラグインディレクトリで公開しています。当ページは「Pz-LinkCard」の説明書のようなもので、プラグインのバージョンアップとともに更新しています

 

これで過去の記事の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.'&nbsp;'.$site_name.$info.'</span>'.$a_cl.'&nbsp;'.$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.'&nbsp;'.$site_name.$info.'</span>'.$a_cl.'&nbsp;'.$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 だけの行が以下のように表示されるようになった。

 

関連

Wordpressテーマを Simplicity からStorkに変更したら
 Wordpressのテーマ(テンプレート)を Simplicity から Stork に変更してみた。テーマを変えてから放置できるくらい全体像が落ち着くまでに3週間かかった。 デザインの変更点は、 トップページにスライダー。(Stork 標準装備) 投稿ページごとに...

 

関連

複数のカテゴリに所属する記事のメインカテゴリーを表示する方法
  Wordpressの投稿画面の右側にある、カテゴリの設定欄でひとつ以上のカテゴリを追加すると、メイン、メインにする、というオプションが現れる。 これは、Wordpress 標準の機能ではなく、Yoast SEO プラグインの機能である。 ここで所属する3つ...

 

関連

表示中の記事と同じカテゴリの最新記事を表示する方法:Wordpress
  吊橋と鶏検索サイトから飛んできて、ある記事を表示した時に、その記事と同じカテゴリーの最新記事のリストを表示するには? まず、PHP Code Widget プラグインをインストールするとサイドバーのウィジェットにPHPコードが使えるようになる。 そこ...

 

関連

無料 Google Compute Engine に ConoHa から丸ごと移転する方法
チャージ不足でサーバー停止50時間ConoHa のチャージ残高が尽きていて、サーバーを止められていたのに気づいたのが1月5日の夜中だった。300円チャージしたのが6日の朝7時で復活した。停止したのは4日の0時過ぎだから、50時間以上のダウンタイムとなった。4日の0時と...

 

関連

Pz-LinkCard
This plugin is intended to display a link in a blog card format. The goodbye to the text-only link.

 

関連

WordPressでリンクをカード形式で表示する Pz-LinkCard
リンクをカード形式で表示させるWordPressプラグイン「Pz-LinkCard」を公式プラグインディレクトリで公開しています。当ページは「Pz-LinkCard」の説明書のようなもので、プラグインのバージョンアップとともに更新しています

 

定形書式の比較ができる:

関連

WordPressでリンク先のサムネイルも表示できるプラグイン『Pz-LinkCard』初心者向け解説
WordPressで記事内に他サイトや他ブログへのリンクを貼る際に、ブログカード形式でサムネイルも表示できるプ…

 

関連

朝日照るダウラギリ: Poon Hill > Ratopani トレッキング3日目
3日目の朝、Gorepani からもう一回プーンヒルに登るか否か迷っていたが、まだ暗いうちに目が覚めたので散歩がてら歩くのも悪くなかった。前日までの疲労感もなかった。 月明かりのアンナプルナ 5:546時出発。月が明るくてライトはいらないくらい。周りの宿からも歩き...

 

 

次の記事

ABOUTこの記事を書いた人

世界を旅して80余國。徒然書苦氣去。 Author

1 個のコメント

  • 大胆にカスタマイズしていただいてありがとうございます。やはりこういうのが出来るのがWordPressプラグインの醍醐味だと思っています。また、お褒めいただきありがとうございます。

    さて、「全カードを削除する機能」についてですが、そのものの実装はありませんが、いったんアンインストールを行うとデータベースを削除するようにしていますのでアンインストール・再インストールでキャッシュは全てクリアされることとなります。それ以外では1ページずつ全チェックして削除していくしかありません。

    目的の記事を検索する機能についてですが、現在テスト中のVer2.1.2で実装予定です。

    設定画面だけで上手くできるようにしたいところでもありますが、まだまだ分からないことだらけなのでカスタマイズ記事は勉強になります。

    では。

  • コメント

    ランダムフォト