Simplicity2.2.4にアップデート。カテゴリーをクリックできるように修正済み

Simplicityのバージョンアップを行いました。

Simplicityを2.2.3にバージョンアップしました。 今回の主な変更点は以下。 「エントリーカード全体をリンク化」機能追加 検索の設定に「analytics.js(ユニバーサルアナリティクス + ユーザー属性、インタレスト対応
Simplicityを2.2.4にバージョンアップしました。今回の主な変更点は以下。 ブログカードの不具合修正(詳細) Twitter独自ツイートボタンのデザイン変更今回は、ほとんどブログカードの不具合修正です。詳細は以下。あと、デフォ
スポンサーリンク

更新作業

前回と同じ方法をとりました。

Simplicity2.2にアップデートしてみた
Simplicity2のバージョン2.2が安定版として公開されたので、早速アップデートしてみました。 またその時に発生したちょっとした不具合も修正したので記録しておきます。 アップデー...

themesディレクトリで以下のスクリプトを管理者権限で実行します。

新機能

本家のページでも紹介されていますが、一番の目玉は「エントリーカード全体をリンク化」機能です。

トップページの記事の一覧やブログカード、関連記事に関してクリックできる範囲が広くなりました。

今まではタイトルやサムネイルだけがクリックできましたが、新しいバージョンでは下の赤枠の範囲をクリックすることができます。

v2.2.4

Simplicity2.2.3で、「エントリーカード全体をリンク化」できる機能を追加しました。 機能を利用するには、Wordpress管理画面から「外観→カスタマイズ→レイアウト(全体・リスト)」項目の「エントリーカード全体をリンク化」を

カテゴリーのクリック

新機能によってエントリーカード全体をクリックできるようになりましたが、記事一覧に表示されるカテゴリーなどがクリックできなくなってしまいました。

例えば上記画像の「WordPress」や「サイト開発」、「提供サービス」がカテゴリーですが、これをクリックしようとしても記事に遷移してしまいます。

あまりクリックする人はいないと思いますが、表示されている以上はクリックできるようにしておきたいと考えました。

方針

新たに追加された「wrap_entry_card」という関数が、新機能を実現しています。

動作としては

  1. エントリーカード内のリンクタグ(<a></a>)を除去
  2. エントリーカード全体をリンクタグで囲む

をしています。

そのためカテゴリーのリンクなどエントリーカード内にあったリンクは除去され、クリックできなくなります。

リンクタグは入れ子にできないのでエントリーカード全体をリンクタグで囲む場合は上記の方法をとるのが賢明です。

しかし今回やりたいことを実現するためにはエントリーカード内のリンクを残す必要があるため、別の方法をとります。

  1. エントリーカード全体をspanで囲む
  2. JavaScriptでクリック時の動作をプログラムする

先に子テーマや独自のプラグインで「wrap_entry_card」関数を定義した場合はそちらが使用されるようにSimplicityは実装されているため、新たに上記の方法を実現する「wrap_entry_card」関数を定義します。

サンプルコード

ここで説明する内容は直接本番環境で行わないほうが無難です。
一度ローカル環境で確かめた上で反映を行うなどの手順を踏んでください。

以下のコードを子テーマのfunctions.phpなどに記述します。

なおPHP5.3以上でないと動作しません。

以下のCSSを子テーマのstyle.cssなどに記述します。

コードの動作説明

エントリーカードのテンプレートをspan要素で囲んだものを返します。

その際にURLや新しいタブで開くかどうかの情報をdataに持たせます。

またクリック時の動作を実現するJavaScriptのプログラムをフッターに追加することを一度だけ行うようにしています。

jQueryのクリックイベントは子要素から発生します。またクリックイベントをフックした関数内でfalseを返すと、それ以上親要素のイベントが発生しなくなります。

したがって上記のJavaScriptのプログラムによって、エントリーカード全体のクリックが可能な状態でエントリーカード内のリンク要素をクリックできるようになります。

まとめ

エントリーカード全体のリンク化は行いたいけど記事一覧のカテゴリーやブログカードのはてブ数などがクリックできないと困るという方は参考にしてみてください。