この記事の所要時間: 1447

wordpressテンプレートのdigipress-Matureは凡庸性のあるデザインから属性に特化したデザインまで。wordpressテンプレートDigipressのMatureテーマを当サイトでは使用している。

そのDigipressのMatureテーマはバージョンアップを何度も繰り返しており、セッティングの備忘録も兼ねて記録していこうと思う。

–スポンサーリンク–

wordpressテンプレートについて

wordpressテンプレートは、有償無償に関わらず制作され世界中から提供されている。
なので、無料でもレベルの高いテンプレートはないとはいえない。

では、なぜ当サイトでは有償であるDigipressのテーマを採用しているのか?というと大きくは3つの理由がある。

  1. バージョンアップの頻度
  2.   

  3. カスタマイズ性の柔軟度
  4.   

  5. サポート体制

バージョンアップについては、月に2,3回は行われている。
なので、その環境に合わせ(最近ではマークアップなど)ユーザーの意見も反映しながら進化し続けている。

カスタマイズ制は、デザインを自由に変更できるだけでなく、ウィジェットが8個あることも魅力だ。

サポート体制については、Digipressのことだけではなく困った時にはwordpressの事に関しても教えてくれる。
例えば、昨年wordpressの表示速度について試行錯誤しているなか、様々な問題が出てきた。
その事を相談すると、一ヶ月も立たない内にバージョンアップで対応してくれた。

このような徹底ぶりがMatureに限らずDigipress全体の魅力といえるだろう。
巷の有償テンプレートでは、中々いいデザインだと思えても次から次へと新作を出し煽ったり、安いからと購入してしまうとバージョンアップが全くない、など思わず考えさせられることも少なくない。
このDigipressに関しては、1度購入してしまえば、バージョンアップも含めサポートもずっと受けられるのだ。
もちろん100点満点ではないかもしれない。それでも、今後のバージョンアップで改善してくれると期待できる。

DigipressのMatureは、wordpessテンプレートの中でも、そんなお気に入りのテーマである。

ということで、Digipressではできる事が多いので、最低限の自分なりのセッティングと機能を把握しておいた方が、更に活躍してくれるだろう。
この後は、備忘録も兼ねて、ここでセッティングしている事をアップしていくことにする。

–スポンサーリンク–

ソーシャルボタンにボックス形式を追加

ソーシャルボタンは以前からあった。それに加えボックス形式を追加されることとなった。

ソーシャルボタンといえば、wordpressの開発者が提供している【jetpack】にも『共有』という項目で含まれている。
被るので、ここではDigipressの設定を使うことにする。
ただ、1つDigepressにはない使えそうなものがあるので、それだけは設定することにした。

サイドメニューの設定より【共有】をクリック。
jetpackの共有設定

『利用可能なサービス』より『印刷』をドラッグし下部の『有効化済みのサービス』にもってくる。
h3に設定されているため、目次出てしまうのが難点かもしれない。
※メールアドレスを加えてもいいかもしれない。

jetpackの共有チェック項目
下に下り、共有ラベルの文字を変更し、『ボタン表示』させたい項目にチェックを入れる。
『変更を保存』をクリック。

jetpackの共有では記事の下部に表示される

すると、このように記事の下部に表示される。
クリックすれば印刷プレビューが表示され印刷がスムーズにできるようになるので、訪問者が紙でゆっくり読みたい場合などに便利になるだろう。

続いて、Digipressでの設定は、
Digipressのソーシャル連携ボタンの設定
「詳細設定」→「シングルページ表示設定」→「ソーシャルサービス連携ボタン表示」で開く。

表示形式に『ボックス』が追加されている。
ちなみに、『Tunmblr』は夜混んでいる時間帯に、読み込みに時間がかかりサイト表示に影響していたので、チェックを外した。

mixiイイネ!では、mixiのpluginでチェックキーを取得することで、複数のドメインでも使用可能だ。
『LINE』はスマートフォンで表示される。

実際に表示された画像がこちら。
ソーシャルボタンにボックス形式を追加

–スポンサーリンク–

トップページの設定について

Digipressのテーマでは、トップページも様々な設定を施すことが出来る。
例えば、wordpressをブログではなく、ホームページのような見せ方も簡単に出来る。

digipressトップページ表示設定
Digipressのトップページでは、上部と下部の設定がそれぞれ出来るようになっている。
デフォルトでは、どちらも『新着記事』の表示になっているので、下部をカテゴリーに変えるといいかもしれない。。

それと、【フリーコンテンツを使用】を選択することで、HTMLで自由に作成することができるようになる。
ただ、ここで直接作成すると不便なので、投稿の新規追加にて作成し、その内容をコピーし持ってくるといいだろう。

もし、トップを1カラムにしたければ、
Digipress表示カラム数
Digipressの【ビジュアル設定】メニューより、【表示カラム数/サイドバー位置設定】の『トップページのみ1カラム』にチェックを入れればいい。

そうすれば、セールスレターのようなトップページも作ることができる。
※そうしなくても、各記事ごとに『1カラム表示』を選択することも可能。

–スポンサーリンク–

各種ショートコードが使用可能

ショートコードを記述することで、簡単に様々な情報をショートコードのみで表示できるようになる。

youtubeのショートコード
【youtube id=”WrO9PTpuSSs”】
表示例 『wordpressとWeb API』

余談メモ:wordpressのapiについて、わかりやすい解説は
[ss url=”https://websites-designs.com/” width=”160″ class=”alignleft” title=”WordPressをカスタマイズするなら覚えておきたいアクションフックとフィルターフック” hatebu=1 tweets=1 likes=1 rel=”nofollow” alt=”WordPressをカスタマイズするなら覚えておきたいアクションフックとフィルターフック”]

[ss url=”http://wpdocs.sourceforge.jp/%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3_API/%E3%83%95%E3%82%A3%E3%83%AB%E3%82%BF%E3%83%BC%E3%83%95%E3%83%83%E3%82%AF%E4%B8%80%E8%A6%A7″ width=”160″ class=”alignleft” title=”プラグイン API/フィルターフック一覧” hatebu=1 tweets=1 likes=1 rel=”nofollow” alt=”プラグイン API/フィルターフック一覧”]

web api関連の解説サイト
Google api
巨人の力を使っちゃえ!Web APIを使えば、あなたの夢も一発で実現
WEB APIの使い方とは?挑戦したらすごく楽しい!
Web APIまとめ

と、wordpressをカスタマイズしたい時、上記のような小難しい事を覚えなくても、これで十分というある程度の事ならDigipressで簡単に実現してくれる。

地図表示例
[googlemap url=”https://maps.google.co.jp/maps?q=%E6%9D%B1%E4%BA%AC%E9%A7%85&hl=ja&ie=UTF8&sll=35.683793,139.775963&sspn=0.169967,0.235004&brcurrent=3,0x60188c0c0b13f54d:0xb630953beee48188,0&hnear=%E6%9D%B1%E4%BA%AC%E9%A7%85%EF%BC%88%E6%9D%B1%E4%BA%AC%EF%BC%89&t=m&z=16″]

サイト表示
[ss url=”https://websites-designs.com/” width=”160″ class=”alignleft” title=”PC・SEO・WPのちょ便利” hatebu=1 tweets=1 likes=1 rel=”nofollow” alt=”PC・SEO・WPのちょ便利の紹介”]
このショートコードではWordPress非公式のAPIを使用しているため、今後仕様変更または利用できなくなる場合があるとのことなので、多様する場合には注意が必要かもしれない。

ショートコードのついでに、プラグインの【jetpack】の中にあるショートコードがあるので、audioを試してみた。

ちなみに、録音したソフトはîMoo0 ボイス録音器】。PC上の音全てから声のみまで自由に録音できる。

--スポンサーリンク--

その他のjetpackのショートコードの記事はîこちら

–スポンサーリンク–

Facebookのおすすめ(recommend) を設置

Facebookのおすすめ(recommend) を設置する際には、Facebookの公式プラグインを利用してもいい。ただ、他のプラグインとの関連でチョットだけコツが必要かもしれない。
Digipressでは、専用の管理画面から簡単に設置できる。

おすすめ記事を表示するには、Facebookにて開発者登録を行い、適当なFacebookアプリを作成し、そこで発行される「App ID」を取得する必要がある。

Facebooknのapi作成ページ

「App ID」を取得ページより、新しいアプリを作成にて、『App Name』を入力後【続行】をクリック。

Facebookのappid

表示された画面の上部にある『App ID』をコピー。

digipressにappidを貼り付け
「詳細設定」→「シングルページ表示設定」→”Facebookおすすめ記事ボックス”にAppidを貼り付ける。
※ついでに、Facebookコメントにもチェック。

Facebook おすすめ(recommend)

このように設定しら場所(この場合は左下)に表示される。
※設定時間、或いは設定された場所までスクロールされると「ピョコン」とおすすめ記事が表示される。
まだない場合は「すすめている人はまだいません」と出るが、「そのうち出るさ」と自身に言い聞かせ、めげずに更新するのがポイント。

ちなみに、先ほどのFacebookのコメントについては、記事数が増えてくると、いつコメントされたかわかりにくいかもしれない。
そんな時には、Facebookのコメントモデレーションツールより、

Facebookのコメント設定

【モデレーター】に適用したいアカウントの頭文字を数文字いれると候補が表示されるので選択。
【禁止されているフレーズ】は、お好みで。※『Facebookの標準的制限』でもいいだろう。
【保存する】をクリック。

ちなみに、『facebookの「いいね」「おすすめ」「シェア」ボタンの違いについて』の参考記事はîこちら

※只今、表示されない不具合を調査中→解決済。

もし、Facebookコメントが表示されない場合には、設定のディスカッションにてコメントを許可する必要があった。
詳細な設定方法はこちらîwordpressの設定関連

Facebookページの「イイネ!」ボックス

Facebookのページと連携させてイイネ!ボックスを追加するには、ウィジェットにあるので好きな位置にドラッグする。

Facebookのイイネ!ボックス

  1. 先ほどのAppidを最上部に入力。
  2. 表示させたいFacebookページのURLを入力
  3. 保存をクリック。

以上のスリーステップで簡単に追加できる。
※ちなみに、jetpackでも可能だがFacebookページとの連携は行えない。

このように表示される。
Facebookボックス表示

Facebookページへの投稿

これは、Digipressでの設定ではないけれど、ついでにFacebookからの投稿も解説しておこう。

サイドメニューの【設定】より【共有】をクリック。

SNSへの投稿を共有設定

【Facebook 連携を追加する】を選択。

Facebookとワードプレスとの連携

『許可を求めています』と小窓が表示されるので【ok】をクリック。

Facebookページの選択

Facebookページ一覧が表示されるので、投稿したいページを選択。

これで投稿時にFacebookページにも投稿されるようになる。

jetpackを使用する前は、<head>へ「Open Graph Protocol(OGP)」を追加したり、そのための設定プラグイン「WP-OGP」や「Open Graph Pro」などを使用し、いちいち表示を、Facebook開発者が提供している『デバッガー』で確認しながら、ogpの修正を行なっていて結構な手間だった。

その作業をワンクリックで簡単に連携でき、調整まで行なってくれる。

他にも、Twitterとの連携もできる。
日本では、取り敢えずFacebookとTwitterを設定しておけばいいだろう。

最近日本語化された『Linkedin(リンクトイン)』も専門分野をアプローチしたり、ビジネスで活用したいなら連携しておいてもいいかもしれない。

サイドバーにRSS・Facebook・Twitter表示

サイドバーにウィジェットを持っていくだけで、RSS・Facebook・Twitterの設定が簡単にできるようになっている。

rss/snsリンクの表示購読

【ウィジェット】より【rss/snsリンクの表示】をサイドバーのお好きな位置へドラッグする。
『RSSアイコンの表示』にチェックを入れ、TwitterのURLとFacebookのURLを入力。
『保存』をクリック。
これだけで以下の画像のように表示されるようになる。

購読/シェアの表示

追記:以前、Googleが運営しているFeedBurnerを使用していた。
メール購読など、いくつか利点があったことと、Googleのサービスは使うほどseoに効く可能性が高くなるから。
※理由の1つとして、Googleは運営者の活動状況を重要視している傾向がある。その事を知らせる1つの手段としてGoogleのサービスを使うこと(例えば、youtubeに動画をアップロード)。

ところが、2013年5月現在FeedBurnerは終わる見方が強くなってきた。なので今では、サイトRSSを使用することにしている。
元々、FeedBurnerを使用すると、Yahoo!ブログ検索やGoogleブログ検索に引っかからなくなる、ということでカスタマイズが面倒だったことも理由の1つだ。

–スポンサーリンク–

その他の細かい設定

  • DigiPress[詳細設定] → [サイト一般動作設定] → [コピーライト設定] にてサイト運営開始年を西暦で指定すると反映される。
  • DigiPress[詳細設定] → [記事メタ情報表示設定] → [ページ閲覧回数表示]にて、 “投稿記事と記事一覧に表示する” にチェック
  • よく読まれている記事ウィジェットを追加…jetpackよりも高機能
  • headerとcssにタグを追加すると、テンプレートを変更した時不便、Digipressでは別途スペースを用意してある。
  • HTML5によるパンくずリストのmicrodata化してあるので、『Breadcrumb NavXT』などのプラグインで面倒な設定をする必要がなくなった。
  • 関連記事表示オプションを追加されたので、『Similar Posts』などのプラグインは必要なくなった。
  • –スポンサーリンク–

    フローティングナビゲーションメニューのデザイン

    フローティングナビゲーションメニューは既に追加されていた。
    今回のバージョンアップではデザイン設定メニューを追加ということである。

    フローティングナビゲーションメニューのデザイン設定
    カラーはお好みで変えられる。
    当サイトでは、デフォルトのままで【シャドウの不透明度】を0~100で調整できるので、50に設定している。

    今回のバージョンアップでは、『(X)HTML5による生成ソースのマークアップ見直し』も行われた。
    丁度、マークアップについて検証していたところで、「Digipressは対応していないんだよな」と思った3日後だったので、正に至れり尽くせりというところで驚いた。

    html5への対応に関しては、まだまだこれからも修正は加えられていくだろうと予想される。

    加えて前回のバージョンアップで、画像をスマートフォン用に最適化され表示されるようになった。


    digipressの設定
    【Googleカスタム検索】と【アフィリエイト設定】はのちほど行う。

    この記事は書きかけの項目です。


    îwordpressテンプレートDigipressのMatureテーマ

    著者情報

    山田招憲
    Wordpressを使ったSEOからの集客を含むアクセスアップサポートを行っています
    (検証サイト3000サイト以上)
    詳しいプロフィールはメルマガ内で…