忍者ブログ

とちにすいはら式+

痒いところに手が届かない雑記ブログ。お金とDTMの話が多め

近未来的音楽素材屋3104式
↑音楽素材はこっち↑

とちにすいはら式+

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

 

【Wordpress】テーマ「アフィンガー」でカテゴリーページに楽曲試聴プレーヤーを設ける方法

お久しぶりの更新でございます。

「アフィンガー」と言えば、特にアフィリエイトをやっている方にとっては有名なWordpressのテーマの1つです。

うちのサイト群でもアフィンガーを使ってまして、東北投信(旧東北神託)なんかもアフィンガーで作ってるサイトの1つです。

東北投信 -青森県八戸市の30代投資信託ブロガーが作る資産運用ガイド-

今回やりたいこと

さて、うちの音楽素材サイトも最近HTMLからWordpress + アフィンガーに切り替えている最中なんですが、その場合に「できるだけ労力をかけずにユーザーが好みの楽曲にたどり着く工夫」が必要になります。

というのも、Wordpressの場合、1ページに1曲といった形で楽曲を配置すると、

  1. トップページからカテゴリーページへ
  2. カテゴリーページから各楽曲の個別ページへ
  3. 各楽曲を試聴して、気に入らなければ前のページに戻る
  4. 次の楽曲の個別ページへ

と、カテゴリーページと楽曲のおいてある個別ページを行ったり来たりすることになります。

普通に考えて、これはどう考えてもスマートではないです。

そこで、カテゴリーページに試聴用のプレーヤー(とダウンロードリンク)を置いて、必要ならば(さらに興味を持ったなら)楽曲の個別ページに飛んでもらう、という形にしたいな、と思ったが今回の話です。

「Advanced Custom Fields」を使おう

今回は「Advanced Custom Fields」というプラグインを使いました。

Advanced Custom Fields

このプラグインの説明自体はネットにたくさんあるので、ここでの詳述は避け、設定した方法だけ紹介したいと思います。

手順1. 2つの「Wysiwyg エディタ」フィールドを用意

今回は管理上の理由から、2つのフィールドを用意し、それぞれ「Wysiwyg エディタ」で加工できるようにしました。

  • 楽曲を置くメディアプレーヤー部分
  • 楽曲をダウンロードするリンク部分

それぞれ分けておいて置けば、あとあとCSSを適用する際に(たぶん)便利だと思ったためです。

他に最適な方法があるかもしれませんが、「動けばいいや」方式でやったので、そのあたりはよくわかりません。

また、「Wysiwyg エディタ」の適用部分を「post」にすると、個別記事の投稿画面に上記2つの入力部分が新たに出現します。

なので、

  • 個別記事に曲名や曲の解説などを書く
  • 楽曲を置くメディアプレーヤー部分に曲のリンクを貼る
  • 楽曲をダウンロードするリンク部分にも曲のリンクを貼る

といった感じです。

このあたりは「Advanced Custom Fields」を設定した後の画像を見てもらったほうが早いですね。

はい、オレンジで囲んだ部分が「Advanced Custom Fields」で追加した部分です。

手順2. カテゴリーのソースコードをカスタマイズする

さて、「Advanced Custom Fields」を使うためには、ソースコードをカスタマイズする必要があります。

ネット上の多くの記事はこのあたりの詳細が省かれていたため、筆者はここにちょっと時間を使ってしまいました。

今回、プレーヤーやダウンロードリンクを表示させたい場所はカテゴリーページです。

そのため、「Advanced Custom Fields」のソースコードをカテゴリーページのソースコードに加える必要があるのです。

アフィンガーの場合、カテゴリーのソースコードは「itiran-thumbnail-on.php / itiran-thumbnail-off.php」というファイルが持っています。

関連する部分のソースコードを貼るとこんな感じです。

<?php if( !st_is_mobile() && trim( $GLOBALS[‘stdata202’] ) === ” )://モバイル以外の場合のみ表示 ?>
<div class=”smanone”>
<?php the_excerpt(); //抜粋文 ?>
</div>
<?php endif; ?>
<?php the_field(‘music_media’,$post->ID); //Advanced Custom Fields ?> // 楽曲を置くメディアプレーヤー部分
<?php the_field(‘music_download’,$post->ID); //Advanced Custom Fields ?> // 楽曲をダウンロードするリンク部分

<?php the_field(‘music_media’,$post->ID); //Advanced Custom Fields ?>というコードは「Advanced Custom Fields 」の所定のコードです。

今回は

  • 楽曲を置くメディアプレーヤー部分:music_media
  • 楽曲をダウンロードするリンク部分:music_download

とそれぞれ名前をつけていますので、ほぼ同じコードを2行加えています。

また、これらコードを加える場所は「itiran-thumbnail-on.php / itiran-thumbnail-off.php」の55行目あたりです。

掲載したとおり、「モバイル以外の場合のみ表示」というコメントがある部分がありますので、そのちょっと下ということで探しやすいと思います。

なお、本来は子テーマとか作ってやるんでしょうが、筆者はWordpress初心者であり、そのあたりはよく知りませんので、今回は元のソースを直接改変しています。

ここは今後要勉強ですね。

完成形はこんな感じ

他のテーマを使っていたとしても考え方は同様で

  • 「Advanced Custom Fields」でカスタマイズ
  • カスタマイズした内容を表示させたい部分(今回はカテゴリーページ)のソースコードに追記

といった方法で、カテゴリーページでの試聴プレーヤーを表示させることが可能になります。

まぁ、こんな話には需要がないでしょうが、それでも誰かの役に立ったらいいなと思い、ネットの海に放流しておきます。

 

拍手[0回]

コメント

お名前
タイトル
文字色
メールアドレス
URL
コメント

トラックバック

スポンサーリンク

PR

ブログ内検索

記事書いてる人

運営者:
さいれほ@planet_f108
3104式の中の人。
音楽以外にはお金の話が好き。資産運用もやってるよ。


ついったー

お問い合わせフォーム

筆者の知識や経験であなたの力になれますか?

必要事項をご記入の上、送信ボタンをクリックすると、運営者宛にメールが送信されます。

ブログ内リンク

レビュー・改造系記事まとめリンク レビュー・改造系記事まとめリンク
PC・トイカメラなどのレビュー記事リストです。

DTM機材レビュー記事まとめリンク DTM機材レビュー記事まとめリンク
DTM機材に関するレビュー記事リストです。

クラブ関連記事まとめリンク集 クラブ関連記事まとめリンク集
音楽を流すクラブにいってきた話まとめ。

トラブル・お悩み解決系記事まとめリンク トラブル・お悩み解決系記事まとめリンク
ソフトのインストールなどで躓いた記事リストです。

サイト作り系まとめリンク サイト作り系まとめリンク
サイトのアクセス増、ユーザビリティに関する記事リストです。

忍者ブログカスタマイズまとめリンク 忍者ブログ運用術から収益化まで
忍者ブログ運用術から収益化までをまとめた記事リストです。

雅楽の舞改めポーチュラカリア成長記事まとめリンク 雅楽の舞改めポーチュラカリア成長記事まとめリンク
2011年から育てている雅楽の舞に関する記事リストです。

とちにすいはら式+アクセスアップ経過記録まとめリンク とちにすいはら式+アクセスアップ経過記録まとめリンク
本ブログのアクセス推移を記録した記事リストです。

お金持ち本まとめリンク お金持ち本まとめリンク
筆者が読んだお金持ち本あれこれまとめリンク。

無職関連の記事まとめリンク 無職関連の記事まとめリンク
無職関連の記事リストです。

スマホでUSENの記事まとめリンク スマホでUSENの記事まとめリンク
スマホで使える有線放送まとめ。データ量も測ってみました。

最新コメント

[07/29 かんりにん]
[07/23 ライルイ]
[11/14 管理人]
[11/11 鈴木隆夫]
[01/20 かんりにん]

フリーエリア

QRコード

とちにすいはら式+

サイトご利用上の注意

ブログ記事の著作権はとちにすいはら式+にあります。 引用される際には、必ず引用元として弊ブログのURLも記載していただくようお願いいたします。 記事の一部もしくは全ての無断転載はご遠慮ください。

記事を参考にされる際には、自己責任にてお願いいたします。