プラグインとの衝突（干渉）回避。過去記事をアイキャッチ付きで表示するショートコードの場合

スポンサー

先日、投稿したサイト内の昔の記事にリンクを簡単にかつカッコよくアイキャッチ付きで表示するショートコード。

このショートコードがどうにも、他のプラグインと衝突してるようで、記事内にこのショートコードを入れたら、
関連記事が表示されなかったり、
目次が表示されなかったり、
コードを表示できなかったり
・・・と、色々苦悩してましたが、
今日やっと目の前がパーーっと開けたように光が差し込んでまいりましたので、嬉しくなってさっそく書いております。

不具合が発生していたプラグイン

いずれも、投稿本文内で動作するプラグイン。
ココが、ポイントなんでしょうかねー？さっぱりです。

前回の投稿の概要

「昔の記事（過去の投稿）にリンクをはる時に、アイキャッチと抜粋付きでカッコよく表示させたい」という思いから、いろいろ探して試行錯誤した結果、以下のコードをfunctions.phpに書いたわけですが、その時点でCrayon Syntax Highlighterが表示されないという症状があって右往左往して、その時はなんとかかんとか表示された。
その時のコードがコレ↓

/*過去記事をアイキャッチ付きで表示するショートコード*/
function add_other_post($params = array()) {
    extract(shortcode_atts(array(
        'id' => ''
    ), $params));
    $html = '';
    if ($id == '') return $html;

    $queries = new WP_Query("pagename=$id");
    if (!$queries->have_posts()) {
        $queries = new WP_Query("p=$id");
    }

    while ($queries->have_posts()) {
        $queries->the_post();

        $link = '<a href="' . get_permalink() . '">';
        $html .=
            '<div class="old-link"><h5>' . $link . the_title('','',false) . "</a></h5>\n" .
            (has_post_thumbnail() ?
                $link . get_the_post_thumbnail() . '</a>' : ''
            ) .
            '<p>'.mb_substr( get_the_excerpt(), 0, 80).'</p>
<div class="sns">
<div class="sns_hatebu"><a href="http://b.hatena.ne.jp/entry/' . get_permalink() .'/" class="hatena-bookmark-button" data-hatena-bookmark-title="' . the_title('','',false) . '" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"> <img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border:none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button_wo_al.js" charset="utf-8" async="async"></script>
</div>
<div class="sns_tw"><a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja" data-via="yume_pyon" data-url="' . get_permalink() .'/" data-text="' . the_title('','',false) . '">ツイート</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
</div>
<div class="sns_pocket"><a href="https://getpocket.com/save" class="pocket-btn" data-lang="en" data-save-url="' . get_permalink() .'/" data-pocket-count="horizontal" data-pocket-align="left" >Pocket</a><script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>
</div>
</div>
</div>'; 
    }
//コレ↓が抜けてた～
wp_reset_postdata();
    return $html;
}
add_shortcode('otherpost', 'add_other_post');

ところがその後不具合頻発

がしかし、その後、同じように投稿内にショートコードを書いているにも関わらず、ちゃんと表示されるときとされない時があり、加えて、最近導入したプラグインTable of Contents Plusが表示されないという症状が発生。
よくよく見るとソーシャルボタンも関連記事も表示されてない、、、

ここへきて、どうやら投稿本文内で動くプラグインとの相性のような気がしてきた（←やっと？）

干渉（衝突）していた箇所

そこで、再び検索の旅に出た。
検索ワード「Table of Contents Plus　表示されない」
で、見つけたのがChild Pages Shortcode と Table of Contents Plusの共存 | tkoyama.com。

コチラのサイトによると、

Table of Contents Plusの目次が表示されない問題。

・・・・（中略）

手さぐりで一部分をコメントアウトしながら探っていくと、
Child Pages Shortcodeでget_the_excerpt()を実行している部分が原因だと分かりました。

との記述。

なるほど。

'<p>'.mb_substr( get_the_excerpt(), 0, 80).'</p>

なぜかは、不明ですが参考サイト（末尾）によると、この抜粋表示部分と干渉してるようです。

一時、ならば抜粋表示を止めてみようかとも考えましたが、あまりにも淋しい。

コチラのサイトでは抜粋表示をAll In One SEO Packでの”Description”を利用するという方法で回避されていました。

だけど、ねこもりやはこれ使ってなかったし、いまから使っても過去記事にいちいち・・・ムリ！

ねこもりやの回避方法

なので、ねこもりやは別の方法を探すことに。

再び検索

見つけたのが、こちら→ワードプレスにソーシャルボタンプラグインSharebar（シェアバー）を設定する | パソコン倶楽部りんご

コチラで、

どうやら最新情報欄に使っているワードプレスの関数、get_the_excerpt と干渉している様なので、get_the_excerpt を get_the_content で代用して問題を回避

とのこと。

え？これって全文表示されちゃうんじゃ？タグも引っ付いて出ちゃうんじゃ？？？？と”はてな”だらけでしたが、
”strip_tags”使うとOKなんだってー！

へー！知らなかった！

'<p>'.mb_substr(strip_tags( get_the_content()), 0, 80).'</p>

で、↑上記の様に変更しましたよ。

最終完成コード

/*過去記事をアイキャッチ付きで表示するショートコード*/
function add_other_post($params = array()) {
    extract(shortcode_atts(array(
        'id' => ''
    ), $params));
    $html = '';
    if ($id == '') return $html;

    $queries = new WP_Query("pagename=$id");
    if (!$queries->have_posts()) {
        $queries = new WP_Query("p=$id");
    }

    while ($queries->have_posts()) {
        $queries->the_post();

        $link = '<a href="' . get_permalink() . '">';
        $html .=
            '<div class="old-link"><h5>' . $link . the_title('','',false) . "</a></h5>\n" .
            (has_post_thumbnail() ?
                $link . get_the_post_thumbnail() . '</a>' : ''
            ) .
            '<p>'.mb_substr(strip_tags( get_the_content()), 0, 80).'</p>
<div class="sns">
<div class="sns_hatebu"><a href="http://b.hatena.ne.jp/entry/' . get_permalink() .'/" class="hatena-bookmark-button" data-hatena-bookmark-title="' . the_title('','',false) . '" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"> <img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border:none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button_wo_al.js" charset="utf-8" async="async"></script>
</div>
<div class="sns_tw"><a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja" data-via="yume_pyon" data-url="' . get_permalink() .'/" data-text="' . the_title('','',false) . '">ツイート</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
</div>
<div class="sns_pocket"><a href="https://getpocket.com/save" class="pocket-btn" data-lang="en" data-save-url="' . get_permalink() .'/" data-pocket-count="horizontal" data-pocket-align="left" >Pocket</a><script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>
</div>
</div>
</div>'; 
    }
//コレ↓が抜けてた～
wp_reset_postdata();
    return $html;
}
add_shortcode('otherpost', 'add_other_post');

参考サイト

感想

PHPって、よくわからん！
今回の様に、なぜ抜粋部分が干渉してしまうのか？まったくもって理解不能。
きっと、ウェブシュフさんがおっしゃるように「特有のなにか」が色々作用するんでしょうね。

でも、勉強になりましたし、解決できてスッキリ！

精神上悪いもんね～、モヤモヤして。

スポンサー

ニュースレターを購読する

このフィールドは空白のままにしてください

更新情報をメールで受け取ることができます。

メールアドレス *

受信ボックスか迷惑メールフォルダを確認して購読手続きを完了してください。