国産CMS『freo』にYouTube関連動画を自動表示する方法

国産CMS『freo』にYouTube関連動画を自動表示する方法

freo(フレオ)は、PHPで作成された国産CMS。本サイトでも利用させていただいておりますが、直観的な操作とカスタマイズ容易な点でおすすめなCMSです。

CMSといえば、Wordpress(ワードプレス)が最も有名で高機能なのですが、高機能がゆえに不要な機能や操作が複雑。さらには、世界的にも利用ユーザー最多がゆえにハッカーの標的にも成り易く、頻繁なアップデートを余儀なくされます。

セキュリティ上の施策ですので致し方ないのですが、毎月のようにアップデートを促されては、とっても面倒なのです。アップデートが原因で、動作不良が起きることもありますので、イマイチ使用する気になれないのです。

さて、ここから本題。

freoでエントリー投稿(記事投稿)する際、その記事に関連する「YouTube関連動画リスト」を自動的に掲載する方法です。

YouTube関連動画リストは、本サイトで最初に公開した人気ブログパーツですが、指定するキーワードに関連する動画リストを表示するものですので、当然キーワードを設定する必要があります。

ですが、ブログ記事を投稿する度に、その都度キーワード変更してコードを張り付けるのは面倒ですし、そもそも記事投稿エディタ「TinyMCE」は、scriptタグを除去してしまいます。TinyMCEを編集してscriptタグを許可することも可能ですが、セキュリティ上好ましくありませんので、やはりテンプレート側で編集した方が無難です。

ということで、自動的に記事に関連する動画リストが表示できる方法があればと考えた結果、記事毎に設定する「タグ」をキーワードにすればいいという、もっともな施策をご紹介いたします。

考え方としては、freoに限らず、Wordpressやその他のブログにおいても「タグ機能をYouTube検索キーワードに充当させる」ということです。

手順

  1. エントリー個別表示のテンプレート「freo/templates/internals/view/default.html」をテキストエディタで編集します。
  2. 記事表示のコード最後(45行目あたり)に下記のコードをコピペして保存。サーバーにアップロードすれば完了。以降、記事投稿の際、設定した「タグ」に関連するYouTube動画リストが自動的に表示されます。
<!--------
▼関連動画
--------->
<!--{if $entry_tags}--> <!--{foreach from=$entry_tags|smarty:nodefaults item='entry_tag' name='loop'}--> <!--{if $smarty.foreach.loop.index < 2}--> <!--{if $smarty.foreach.loop.first}--> {assign var=str value=$entry_tag} <!--{else}--> {assign var=str value=' '|cat:$entry_tag} <!--{/if}--> {assign var=q value=$q|cat:$str} <!--{/if}--> <!--{/foreach}--> <h3>関連動画:{$q}</h3> <script>
var random = Math.random();
document.write('<script charset="utf-8" src="https://wdeco.jp/api/?'+random+'&uid=&parts=youtube2&genre=&row=2&query={$q|escape:"url"}"><\/script>');
</script> <!--{/if}-->
<!--------
▲関連動画
--------->

なお、YouTubeの検索キーワードは「2ワード程度まで」が感度良好ですので、複数タグが設定されている場合、前方2ワードを抜粋して、検索キーワードに割り当てています

もちろん、記事にタグが設定されていない場合は、なにも表示しませんので、画面を汚すことなくご利用いただけます。

freo使いの方は、ぜひお試しください。

freo&smarty
2019.07.06 07:14
2019.07.17 07:36

Related entry

Pickup entry