CocoonでリンクカードのHTMLタグを編集する方法

今回はWPのテーマ、CocoonでリンクカードのHTMLタグを編集する方法を書いて行きたいと思います。

Cocoonでは基本的な編集はwordpressの管理メニューから編集出来たり、CSSで見た目もしっかり編集できるので、Cocoon本体をいじる必要はあまり感じられなさそうですが、このリンクカードを使った場合の外部ページへのリンクのクリック数をカウントしたいと思った時にアナリティクスのタグをリンクタグ内に入れる必要が出てきました。

アンテナサイトを作ってて、中身はほぼ自作なので自分で作成した部分に関してはonclickタグを入れてカウントすることができました。しかし外部リンクを紹介するページは自作するつもりでしたが、Cocoonのリンクカードを見たら…

 

なかなかオサレだったので、そのまま使うことにしました。しかし既存の物なのでアクセス数がカウントできない!ということでタグを改変する事になりましたw

 

上記の画像が実際のアンテナサイトになります。アンテナサイトではアクセスを送ってもらった分返したいということから、リンククリック数を把握しときたいんですよね。

※誤解がないように書いておきますとリンクカード少しわかりにくかったので「続きを読む」という箇所は追加しています。

 

外部リンクのクリック数をカウントするというと以下の方法が便利かなと思いました。

アウトバウンド リンクを測定する - アナリティクス ヘルプ
ユーザーがリンクをクリックして、サイトを離れたタイミングを把握します。 注: この記事は、analytics.js スニペットのタグが付けられたサイトのみを対象としています(gtag.js のタグが付けられたサイトには該当しません)。 Google アナリティクス イベントを使用して、外部のウェブサイトにつながるアウト...

 

これですね。そこで今回はCocoonの本体にこのタグを入れたいと思ってリンクカードを生成しているファイルを探したんですが、結構苦労したので記事にしました。

 

編集するファイル

外部リンクタグを編集する場合、まず、FTPソフトなどを使ってWordpressがインストールされているフォルダを開きます。

wp-content/themes/cocoon-master/lib 内にある「blogcard-out.php」

というファイルに外部リンクを生成しているスクリプトがあります。
ファイルを開いたら一番下の$tagのところにHTMLが書かれています。

 

外部リンクの数をアナリティクスでカウントしたい場合は、HTML内の適切な箇所に、onclickを入れれば完了です。Javascriptの部分はヘッダを編集できる箇所を編集しましょう!

cocoon本体を改変したので、バージョンアップの際には注意ですね( ;∀;)

コメント

タイトルとURLをコピーしました