カテゴリー
ワードプレス

wordpressの設定1

wordpressはインストール後、直ぐにスタートできる。

ただ、せっかく色々できるwordpressだから使いやすくセッティングして使っていきたい。
ここに設定するさいの1つの目安をメモっておくことにした。
※wordpressのテンプレートDigiPressの設定も含む

–スポンサーリンク–

リンク色の設定

テンプレートのデフォルトのままだとリンクが分かりにくい。テキストリンクの色はサイト構築の上で重要な位置を占めるので色を変える。
※Googleやニコニコ静画で使われている【#1111cc】にした。
link1
サイドバーのDigiPress→ビジュアル設定→基本テキスト設定→リンクカラーへ【#1111cc】→設定を保存をクリック
※ボールド(太字)のチェックは好みで。

–スポンサーリンク–

パーマリンクの変更

wordpressのパーマリンクでは、デフォルトが【p=123】になっていて、これでは動的とみなされるしURLで内容が分かりにくくユーザビリティによろしくないという見方もある。そこでカスタム構造で変更する。
例えば変更代表的なもので【/%category%/%postname%/】がある。ただこの場合カテゴリーを変更する場合に記事のURLも変わってしまい不便が生じてしまう。
なので、他にも色々な推奨が様々なサイトで出ている。

ここでは【/%postname%-%post_id%.html】を紹介したい。

link2
設定よりパーマリンク設定からカスタム構造に【/%postname%-%post_id%.html】を貼り付ける。そして変更を保存。

フォントサイズはそれぞれの好みでいいだろう。

ただ、見やすいのは14~16PXと云われているらしい。

–スポンサーリンク–

Digipressのメモ書き

wordpressのテンプレート『Digipress』は当サイトで使用している。
ここにメモを書くことにした。※ついでにSEOなどのメモも含む。

  • トップフラッシュ 920×320
  • トップ画像 940×180
  • アイキャッチ 330×200
  • 記事幅 670
  • サイドバー幅 340
  • 1カラム幅 1020
  • タイトル35文字
  • 説明文 120文字
  • 黄金比 250×405 180×291
  • 白銀比 200×283 150×212
  • カテゴリー
    ワードプレス

    digipressでリンクシェアの設定について

    Digipressへlinkshareの登録についてdigipressでリンクシェアの設定ができる。※digipressとは当サイトでも使用しているwordpressのテンプレート。
    リンクシェアの設定ができると何が便利なのか?というと、リンクシェアはアフィリエイトのASPで様々な商品やサービスを取り扱える。
    その中でも、ituneのアプリを紹介しやすいくなるということ。しかもDigipressのショートコードを使えるようになる。

    もちろん、Digipressの管理画面に設定方法は記載してある。
    ここでは、より詳しく画像を添えて解説していくことにした。

    –スポンサーリンク–

    digipressでリンクシェアの設定

    Digipressにリンクシェアのトークンを取得

    digipressでリンクシェアを設定するためには、まずリンクシェアに登録してあることが前提となる。

    リンクシェアはこちらより登録できる。
    îリンクシェア・ジャパン

    登録したら次にこちらよりログイン

    linkshareでログイン

    次に、サイト(ブログ)の登録がまだの場合には、【マイアカウント】より【サイトアカウント】で『新規登録』より必要事項を記入し登録。

    続いて、メニューの『リンク』→『Webサービス』
    linkshareでトークンの更新
    【トークンの更新】をクリック。

    トークンの更新でハイを選択

    小窓が開くので【はい(トークンの更新)】を選択しクリック。

    このサイトアカウントのトークン

    このサイトアカウントのトークンに記載されている英数字をコピー。

    digipressにトークンを貼り付け

    Digipressの管理画面『トークン』に貼り付けて保存。

    リンクシェアでECサイトID(MID)を取得

    続いてDigipressのショートコードを使用できるようにリンクシェアでECサイトID(MID)を確認する必要がある。

    その前に、itunesとまだ提携が済んでいない場合には申請をする。
    メニューの『プログラム』より、右上の『ECサイト検索』から、「itunes」で検索。
    linkshareでitunesの申請

    「itunes」が出てくるので、チェックし、『申請する』をクリック。
    すると、右側のステータスが「承認待ち」に変わるので、1日ほど待つことになる。

    linkshareのサイト審査

    審査が行われた後、数日で登録しているE-MAIL宛へ結果が届く。
    土日は休みかもしれない。当サイトでは週明けに届いた。

    linkshareから届いたE-MAIL

    linkshareへログインすると申請中が『承認済』に変更されている。
    【Tunes Store(Japan)】にマウスを置くとECサイトIDが表示されるので、コピー。
    linkshareのECサイトID

    digipressの管理画面へいき、『サイト動作一般設定』の『アフィリエイト設定』より『ECサイトID(MID)』へ貼り付ける。

    digirrpressのEDサイト設定

    –スポンサーリンク–

    Digipressのショートコードを使用した実際の表示結果

    実際にDigipressのショートコードを使って貼り付けてみた。

    [linkshare url=”https://itunes.apple.com/jp/artist/ri-jingbijinesu/id394890743″]日経ビジネス[/linkshare]

    こちらは画像付き
    [linkshare url=”https://itunes.apple.com/jp/artist/joji-s-kureison-da-dao-li-yi/id299726490″ title=”バビロンの大富豪” size=”20MB” price=”2100円” cat=”オーディオブック” dev=”バンローリング株式会社” size=”95.4MB”]バビロンの大富豪[/linkshare]

    無料のアプリでも可能。
    こちらはappleが開発した教育アプリ。

    iTunes U Appでは、主要な大学やその他の学校のすべての講座、さらには無料教育コンテンツの世界最大のデジタルカタログに、iPad、iPhone、iPod touchから直接アクセスできます。分子生物学を専攻している大学生にとっても、スペイン語を取っている高校生にとっても、ヨーロッパの歴史に関心があるだけの人にとっても、これはいつでもどこでも学習したい人に価値のあるツールになっています。

    [linkshare url=”https://itunes.apple.com/jp/app/itunes-u/id490217893?mt=8″]iTunes U[/linkshare]

    実際に購入していただいた時、反映されるかどうかは今後追加していく次第だ。

    カテゴリー
    woespress有料テーマランキング ワードプレス

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

    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』
    [youtube id=”aiUKkFS9xZw”]

    余談メモ: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テーマ