忍者ブログ

とちにすいはら式+

痒いところに手が届かない雑記ブログ。お金と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回]

手持ちアフィリエイトサイト群のSSL化(HTTPS化)を行うまでの検討したことややったことなど

今年の課題の1つにしていた、アフィリエイトサイトのSSL対応(HTTPS化)を行いましたので、その経緯や手順などをご紹介。

やる必要があるかどうかは微妙なとところですが、すくなくともグーグル検索はそういう方向に進んでいるので。

ちなみに、以下は全てHTMLで作ってるサイトの話です。ワードプレスで運用しているサイトは最初からHTTPSで作ってるので、今回の話とは無縁です。

SSL対応(HTTPS化)を行った経緯

もともと去年末ごろから考えていたのですが、2017年8月になってフォーム入力のあるウェブサイトには警告を出すとの案内が届きました。

Chrome のセキュリティ警告を http://cyrfplus.blog.shinobi.jp に表示します http://cyrfplus.blog.shinobi.jp の所有者様 2017 年 10 月より、ユーザーが Chrome(バージョン 62)で HTTP ページのフォームにテキストを入力すると、「保護されていません」という警告が表示されるようになります。また、シークレット モードを使用している場合は、HTTP ページにアクセスするだけで「保護されていません」と表示されます。

少なくともグーグルのプランでは、たしか今年の年末(うろ覚え)ぐらいまでには、非SSLのウェブサイトには常時警告を出すという話があったかと思います。特にAndroidでChromeを使ってウェブを見ているユーザーにとっては、「このサイト危ないの?」と誤認に繋がる可能性があるわけです。

というわけで、手持ちのサイトを全面的にSSL化しようと決意したわけでした。

SSL対応(HTTPS化)への課題

  • SSL化にはお金がかかる
  • アドレス変更でアクセスが減ったら死亡

SSL化にはお金がかかる

通常、ウェブサイトをSSL化するためにはSSL証明書を取得し、更新し続ける必要があります。例えば、さくらインターネットでSSL化しようとすると、最少額のラピッドSSLで年額1,620円、サイバートラストだと年額4万円もします。

ちょっと高いですね。趣味サイトではなかなか難しいですね。

というわけで、今回は稼動しているサイトを全てエックスサーバーに移転し、エックスサーバーの無料SSLを利用する手を使うことにしました(もともとは「さくら」で運用)。

契約費で言えば、さくら + SSLよりエックスサーバーのほうが高いのですが、SSL化で手間をかけたくないのと、今後の発展的なことも考えて。

アドレス変更でアクセスが減ったら死亡

よくある話ですが、グーグルがキャッシュを更新するタイミングで検索順位が恐ろしく下がる場合があります。

当然、検索依存のアフィリエイトサイトは順位が飛んだらアウトです。まぁ。ここは賭けるしかないわけですが。

SSL対応(HTTPS化)への手順

  1. さくらのサーバー(旧サーバー)にあるデータを丸ごとエックスサーバー(新サーバー)に移動
  2. DNSレコード(or ネームサーバー)を変更して、エックスサーバーのデータを閲覧できるようにする
  3. エックスサーバーの無料SSLを適用する
  4. HTTPSのページで、HTTPで呼び出しているスクリプトやアフィリエイトリンクを全て修正
  5. 「保護された通信」になったら修正完了

DNSレコード(ネームサーバー)の変更で、よく「24時間~72時間の浸透」なんていわれますが、だいたいのサイトは3~5時間程度で移転できました。

1サイトだけ時間かかったので、古いDNSレコードを新しいサイトに割り当ててからネームサーバーを更新したら、すぐに終わりました。

どうも、変更前のネームサーバーが、変更後もがんばっていた?ようです(このあたりはあとで詳しく書きたい)。

あと、よくある課題はアフィリエイトリンクがHTTPS非対応って話ですかね。うちはメインがトラフィックゲートなので、幸いなことに全てのリンクがHTTPSに対応していました。アドレスの大幅な変更もないので、秀丸(w)でグレップ置換で一発置き換え。

この際なので、HTTPSに対応してない広告のうち、売り上げにさほど関与していないものは総撤去することに。これはこれからやる予定です。

2サイトは既に移転し様子見中

2サイトは1週間ほど前に移転しており、現在様子見中です。今のところ極端な順位変動はありません。非SSL化時点で1位だったページは、SSL化後も1位のままになっています。

やっぱ、SEOで上位表示を競っているサイトが多いほど飛びやすいんでしょうね。

これはつまり、順位が変動しない = 利益に繋がらないページを増やすことばかり頑張っている疑惑があるわけですねw筆者のセンスのなさがまたしても露呈してしまった・・・。

拍手[1回]

立ち上げ1週間のフル外注のWordpressサイトで検索流入を観測した話

1.はじめに

主要HTMLサイトのWordpress引越しを計画中で多くのサイトをWordpress化することを書いたのですが、それと同時に新規サイトも複数Wordpressで立ち上げています。

ただ、自分の力は既存サイトに投入したいため、

  1. フル外注で作成
  2. アクセス拾い始めたら自身でカスタマイズ

の流れで考えています。

そしたら開始1週間で検索流入が観測されたのでびっくりしたお話。もう自分で記事書くのが嫌になりそうです。

2.新規サイトは人がこない

一般に、Wordpressを含む始めたばかりのサイトは人が来ないです。

  • コンテンツが少ない
  • ドメインが弱いのでコンテンツが評価されにくい

経験的に3か月から半年、長ければ1年ぐらいはこの状況が続きます。

また、全く初めてのサイト運営の場合には、SEO面もおろそかになりがちです。自身の書きたいことを書いてしまいがちで、検索されやすい単語と自身が書く内容の不一致が生じやすいです。すると、ユーザーの検索との関連性が低いと評価され、やはり検索にかかりません。

つまり、Wordpressやブログを始めた翌日からアクセスが大量なんて夢物語なのです。

3.今回講じたSEO対策

というわけで、それらを踏まえて今回やったこと。

  • 開始時点である程度のコンテンツを用意
  • 最初から検索意識したタイトル(H1タグ)設定

最初から外注記事を投入し、開始1週間で30記事を揃えました。加えて、既存サイトのSEOに対する経験を踏まえ、ある程度検索需要があるものをタイトルに据えています。

また、Wordpressを利用するにあたって、定評のある無料テンプレート「Stinger」を利用させていただいています。

テンプレかWordpressの特性なのかは知りませんが、GoogleにサイトのURLを知らせる前から記事がインデックスされ、定期的にGoogle botも回ってくるようになりました。

4.これからやること

これからやることは

  • 外注記事だけで100記事超を

上述の通り、当面は数を揃えます。でも、検索エンジンに低品質と評価されてどこかに飛ばされるのも本意ではないので、適宜加筆も進める予定です。

来年の今頃には第二の主力サイトになってくれることを望んでるんですが、さてどうなるでしょうか。

関連記事

拍手[0回]

スポンサーリンク

PR

ブログ内検索

記事書いてる人

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


ついったー

お問い合わせフォーム

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

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

ブログ内リンク

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

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

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

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

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

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

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

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

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

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

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

最新コメント

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

フリーエリア

QRコード

とちにすいはら式+

サイトご利用上の注意

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

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