URLをカード表示する Pz-LinkCard の導入とカスタマイズ

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.'&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 だけの行が以下のように表示されるようになった。

 

 

 

 

 

 

 

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

 

 

 

 

  • またまたこのサイトのSSL証明書が期限切れになった。 Kusanagi の自動更新ができていない。 それで手動であれこれしてみても、こんなエラーが出る。# kusanagi update cert Challenge failed for domain makotoiwasaki.com Challenge failed for domain www.makotoiwasaki.com Attempting to renew cert (makotoiwasaki.com) from /etc/letsencrypt/renewal/makotoiwasaki.com.conf produced an unexpected error: Some challenges hav...
  • Google の Indexing API を使うと、新しい投稿記事を瞬時にGoogleの検索エンジンに登録できる。 WordPress のプラグインとしてインデックスAPIが利用できる。使い方は英語だが、この通り: ⏱️ Get Google To Index Your Website Instantly Using the Indexing API ⚡Take a look at how you can use Google's new indexing API & to get your website's pages and content crawled instantly instead of waiting for Google to...
  • Yoast SEO を停止して、Rank Math SEO プラグインを使ってみたらGoogle の検索結果に表示される記事抜粋スニペットの文字数が短過ぎに見えてびっくりした。#1 Yoast Alternative You Deserve - Rank Math SEO vs. Yoast SEORank Math SEO plugin for WordPress is hands down the best Yoast alternative WordPress plugin. And the best thing is, Rank Math is completely FREE!Rank Math
  • WP_CRON を停止して、Linux の crontab に移行する設定をこれまでに何度も試みたがうまくいかなかった。 毎日バックアップされるはずの、UpdraftPlus プラグインのクロンが動いていない。やっと成功した設定方法を記録しておく。wp-config.php に次の行を追加する。define('DISABLE_WP_CRON', true);/var/spool/cron  に、  httpd という名前のファイルを作成し、次の1行を追加する。 所有者を httpd.www など、httpd nginx サーバーの稼働ユーザー名と同じにする。nginx.conf に書いてある。root@s4:/v...
  • Kusanagi WordPress プラットフォームでは Fcache とBcache がある。 Fcache とはNginx ヱブサーバーのキャッシュ機能であり、Kusanagi の独自機能ではない。Nginx のアクセスログを眺めていると、  BYPASS MISS EXPIRED のみで、HITが殆どない。 トップ頁、アーカイブリストの頁ではHIT、 個別投稿頁では、BYPASS MISS EXPIRED ばかりでHITがない。Kusanagi fcache on とすると、fcache は有効になったかのように思えるが、本当にキャッシュが効いているのかどうかはログで確認しないとわからない。まず、Wordpressの編集画面にログインし...
  • 目次1 HTTPD アクセスログの日本語化2 Logwatch も日本語化 HTTPD アクセスログの日本語化 Nginx,  Apache ヱブサーバーのアクセスログを見ると、日本語URLはエンコードされていて読めない。 そこで、デコードして表示させる。 ログのファイル名が ssl_access.log だとすると、tail -f ssl_access.log| perl -ne 'use URI::Escape; print uri_unescape($_);' tail -f access.log | php -R 'echo urldecode($argn)."\n";'で、日本語URlが読める状態で出力される。 Apa...
  • ヱブサイトの再構築中には、スタイルシート、style.css を頻繁に調整更新する。 CSSを追加、編集する度に再読み込みを繰り返して、変更の反映を確認していた。 これで編集者は反映を確認できるのだが、一般閲覧者はわざわざ再読み込みしたり、キャッシュを削除したりするはずはないので、変更が反映されていない崩れたデザインを見ているかもしれない。わざわざリロードしたりキャッシュを削除したりしなくても変更が確実に反映されるような設定方法を発見した。wp_enqueue_scripts で CSS、JS の読み込みを管理している場合には、次のようにfunctions.php に記述する。// 子テーマのstyle.cssを最後に読み込む add_acti...
  • 2679年8月25日

    頁カウンターの比較 WordPress

    WordPressで使える頁カウンターをいくつか同時に使ってカウントの仕方の違いを比べてみた。WP-PostViews    長期常用中 Post Views Counter  新規インストール Google Analytics Post Pageviews Pjaxblog の付属カウンター機能WP-PostViews は他のカウンターよりもカウントが多くなりがちなことに気づいた。一度のアクセスなのに2回カウントされることもあるようだ。ロボットクローラー Bots のリスト数も不十分に少ないような気がする。それで数が多くなりやすいのではないか。 それで Post Views Counter に乗り換えることにした。Post Views Cou...

WordPress カテゴリ人気記事 Views most

WordPress カテゴリ人気記事 月間

タグ関連記事

閲覧履歴

    //cookieが無い場合の処理