忍者ブログ

とちにすいはら式+

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

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

とちにすいはら式+

【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回]

音楽素材屋が動画制作を始めたようです

せっかくいろんな証券会社に口座を持っているので、サイトのコンテンツとして投資アプリの動画作りを始めました。

事の経緯としては、手持ちアフィリエイトサイト群のSSL化(HTTPS化)を行うまでの検討したことややったことなどで投資サイトのSSL化してからアクセス数が不安定。

なので「アクセス数アップのためにできることは全部やろう」との方針で、その一環としてウェブサイトに動画を掲載してみようと至りました。

そもそも「投資で株を買う」といっても、多くの人は頭の中にその絵を描くことすらできないわけで。ので、コンバージョン率が少しでも上がったらいいなあといった感じです。

まぁ、普通の投資サイトってそこまでやらなくてもコンバージョンとってるので、やはりうちのサイトのセンスが無いのですねw

今日作った動画

楽天証券 MARKETSPEED for Macのチャート画面

筆者のメインのマシンはWindowsですが、ノートはMacbook Airを利用しているので、そのMac版でデスクトップキャプチャーしたMARKETSPEED for Macです。

テスト動画みたいなもので、単に文字を載せただけみたいになってます。

Mac向けのデイトレアプリって実は貴重で、インストールして使うタイプはMARKETSPEED for Macしか知りません。

ブラウザベースで利用できるものなら、岡三オンライン証券の「岡三ネットトレーダーWeb2」もありますが、ブラウザベースなのでスピードで劣るのがネックです。

SBI証券 株アプリで株を実際に買う方法

これは筆者のAndroidスマホで動かしている株アプリをスクリーンレコードで撮影し、後から文字を載せたものです。

実際に購入後の画面まで撮ってるので、「株を買う流れってどんなかな」みたいな人に見て欲しいなと思っています。

製作に利用した環境

「Adobe premiere elements 2018」を利用しています。

Adobe premiere elements 2018

動画制作ソフトってフリーのAviutlが有名なのですが、なんというかデザインがビジネスソフト的でなんだかやる気がわかない。

また、フリーだと逆に本気度合いが薄れてしまうので、あえてお金を払って絶対元を取ろうというつもりで選びました。

その点で、「Adobe premiere elements 2018」はいろいろガイドが充実しているので、購入から1日以内に動画をリリースするまでに至ったのがよかったです。

一方、困ったことに、筆者のパソコンは一応Core i7がのってるのですが、2012年のIvy Bridgeと少し年季が入ってきており、結構きついです(Aero Slimイヤッッホォォォオオォオウ)。

来年はグラフィックカードを搭載したパソコンの新調かなーと思っています。

思えば自分の音楽素材を素材として使ったのは初めてかも

曲を選んでて、「うちの音楽素材はこのような動画には合わないな」と強く思った次第ですw

もし興味があれば、ぜひぜひご覧いただければ嬉しいです。

拍手[0回]

売り上げしょぼいのに「ミエルカ for アフィリエイター」を契約してしまいました

表題の通りです。うちの売り上げってめちゃくちゃしょぼいのに、「ミルルカ for アフィリエイター」という月額3万円のSEOツールを契約してしまいました。

月額3万円って2ヶ月我慢すれば、ローランドのD-05とか買えちゃうんだぞ!

契約に至った経緯

  1. サイトをSSL化した(手持ちアフィリエイトサイト群のSSL化(HTTPS化)を行うまでの検討したことややったことなど
  2. ちょうど時を同じくして、グーグルの検索順位変動が始まる
  3. 売り上げピンチ

どちらかというと、「これからさらに稼ごう!」っていうよりも、「売り上げやべええ!」って背水の陣だったりします。

そこで、「やれることはやる」という方針で契約したのがミエルカです。

このツール、最初の契約は半年で18万円の一括払いなので、結構勇気のいる出費です。まぁ株とかやってれば18万円とか結構慣れっこにもなってしまう(イオンとか17万円ですし)んですけど、日常的にそのぐらいの金額を出費する機会ってそう多くは無いので。

ほら、パソコンだってよっぽど高性能なものでなければ、10万円で買えちゃいますし。

というわけで、「まぁ半年やってダメなら契約はやめちゃう(というかアフィリエイトから撤退w)」というつもりで始めたのです。

ミエルカでできること

  • 検索ワードを取得したり
  • 上位サイトと自分のサイトの比較を行ったり
  • 自サイトの検索順位をチェックできたり

ウェブサイトや検索ワードを分析するためのツールですよね。

ある程度アフィリエイトやってると「共起語」とかいう言葉を知る機会があるかと思いますが、これを取得したり、あとはFAQサイトでよく話題になっている疑問をチェックできたりもします。

契約する前は、他のアフィリエイターさんから話を伺って、「契約しても意外と出番は少ないのでは」と思ってたのですが、自分の場合は毎日使ってますねw

本当はサイトを作る前に、ミエルカで調査を行って、その調査結果に基づいてサイトを構築すべきなので、たぶん1記事作るごとにミエルカ使うのは間違ってると思うんですけど。

でも、データを眺めるのは好きなので、結構毎日何かを取得してはいろいろ思索を行っています。

ミエルカ使って検索順位はどうなった?

まだ使い始めて1ヶ月も経ってないので様子見です。

ただ、1つ言えるのは、今勝負しているところでは、コンテンツの作りこみよりもリンクの質や本数で負けている感が強いですね(笑

最近は、「このサイトのこの記事ならここまでは来るだろう」みたいな見込みもちょっとつくようになってきたので、逆に言うと「この記事でこのサイトを抜けないのか!」というのは大抵リンクの本数とかドメインのパワーが足りないとかですよねw

ごく普通の文章だけのサイトって、どうやってリンクを貰うかって難しいですよねー。音楽素材サイトなら、「ここの楽曲すげー!」みたいなリンクをたくさんもらえるんですけど。

いうちのサイト(インストックネット)も証券会社からリンクいただいていますけど、もう1本ぐらいなにか強力なリンクが欲しいなといつも思っています。

そのあたりをどうするかが直近の課題です。

今後の方針

今秋は九州行ったり、1ヶ月に2回も東京いったりと旅費がやばいので、11月に東京に行ったら、それを最後に3月ぐらいまで引きこもって仕事するつもりです。

既存のサイトでもいいですし、新規に立ち上げているサイトでもいいので、とりあえず売り上げ戻したいですよね。

拍手[0回]

スポンサーリンク

PR

ブログ内検索

記事書いてる人

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


ついったー

お問い合わせフォーム

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

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

ブログ内リンク

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

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

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

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

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

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

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

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

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

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

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

最新コメント

[11/14 管理人]
[11/11 鈴木隆夫]
[01/20 かんりにん]
[01/20 シモハチ]
[04/03 かんりにん]

フリーエリア

QRコード

とちにすいはら式+

サイトご利用上の注意

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

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