随分と手間がかかったよ

この記事は投稿されてから年月が経過しており、
現在の当ブログの状況と差異が生じている場合があります。
参考になさる場合はその点をご理解の上、ご利用くださいますようお願いいたします。

ここ数日、ブログに実装したい事が出来たのでまたいじってました。
と云っても、いきなりこの本番環境をいじるわけではなくほぼ同環境の未公開テストブログを作って、そこで激しくテストしています。

今回実装したかったのはサイドバーにある【Recommend】の部分。
いままではアマゾンで作ったリンクをそのまま貼り付けていたのですが、それじゃあいちいちアマゾンにログインしてリンクを作り、サイドバーウィジェットを開いてそこにリンクを貼り付けて~保存して~、表示したくなくなったのがあれば削除して~と面倒臭い訳です。
なんとかどっかにデータを追加していくだけで表示がされるように出来ないかな、と調べていたらWordPressには【カスタムフィールド】という機能があって、投稿画面からそこにデータを追加していって、表示したい場所にタグを書けば自動的に出力してくれるらしい。

ということで、カスタムフィールドが何か、というところから理解する羽目になりました。

用意したものはアマゾンのアソシエイトを出力してくれるプラグイン【AmazonJS】。
日本の方が作られているプラグインで、本文でも使っているのですがアマゾンのリンクをきれいなレイアウトで出力してくれるプラグインです。
もう一つはカスタムフィールドに手を加える事の出来る【Custom Field Template】。
こちらは名の通り、カスタムフィールドにオリジナルのテンプレートを追加する事ができ、同じレイアウトで内容だけ違うページをたくさん作る(それこそ本の紹介とか)時に役立つプラグインです。

今回【Custom Field Template】は一部の機能しか使ってませんがね…。

まず【AmazonJS】のカスタマイズから。
前述の通り、本文でも使っているのでそのままいじると本文の方の表示も変わってしまうので、プラグインの内容をカスタマイズしてもう一つ設置しちゃいます。
一番簡単なのは全部のファイルの内容を覗いて、ファイルの出力名とかその辺りを全部別のものに変えていく事でしょうかね…。
自分でプログラム書く能力はないんですよ、私。
で、動作の確認をしたら間違えないように表示内容もカスタマイズします。
今回はサイドバーなのでタイトルと画像と著者だけにしましたが、その辺りはお好みで。

次に、固定ページを新しく作り(タイトルも本文もなくてOK)、カスタムフィールドを表示させて「名前」を決めます。
日本語でもOKらしいですが、英数小文字とかがベターじゃないかと思います。
「値」にはAmazonJSで出力されたショートコードを入力します。
htmlタグなども使えるのでコメントとかラインも入れられます。

さらに【Custom Field Template】の設定。
メニューの設定からカスタムフィールドテンプレートを選択し、今回はテンプレート部分は使わないので特に手をつけず、無効にしておきます。
「グローバル設定」で「ショートコードをウィジェットで使う」にチェックを入れ、「[cft]and[cftsearch]Shortcode Format」(ショートコードにしない為に[]は全角にしてありますが本来は半角です)の部分にカスタムフィールドを出力するPHPコードを書いて「PHPを使用する」にチェック。
ここまでが終わったらウィジェットを開いてテキストウィジェットを利用してお好みのタイトルをつけ[cft format=1](数字はPHPコードを書いた方のフォーマットなので書き換えて下さい)とショートコードを入力します。

そしてトップページで確認をすると…

表示

今回のカスタマイズではこんな風に表示されるはず。

表示されなかったら…

add_filter( 'widget_text', 'do_shortcode');

テーマのFunction.phpに上記のような記述をしてみて下さい。
それでも表示されなかったら……
白殊では対応出来ませんのでご自身で調べて下さい(ノ∀`。)

コメント

この記事へのコメントはありません。

この記事へのトラックバック・ピンバックはありません。

TrackBack URL

   この記事にコメントする   

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


トップへ戻る