[WordPress]WordTwit3.0のアップデートとbitlyの設定方法

暑くなって来ましたね、@cappeeです。

WordPressでブログの公開と同時に自動でツイートしてくれる優良プラグイン「WordTwit」が 3.0 にアップデートされました。

6月11日に行われたtwitterのAPIの仕様変更に伴うアップデートになるので、設定を最初からし直さないといけません。

少々厄介だったので「WordTwit3.0」の設定方法と、ついでにURL短縮ツールの「bitly」の設定方法についても一緒にメモしておきます。

WordTwit 3.0 の設定

WordTwit 3.0 の日本語化

まずWordPressの管理画面からWordTwitを3.0にアップデートしてください。

WordTwit 1024x605 [WordPress]WordTwit3.0のアップデートとbitlyの設定方法

管理画面の左側に新しくWordTwitのメニューが追加されますので、「WordTwit Settings」をクリックして設定画面を開き、「General」の下のプルダウンから「日本語」を選んでひとまず保存しておきます。

Twitter Developers の設定

日本語化したら、画面上部の青いアラート部分にある「Configure on Twitter Now »」をクリックすると、twitterのDevelopers画面が開くので該当のアカウントでログインします。

「Create a New Application」ボタンを押して、必須項目を入れていきます。

WordTwit1 720x1024 [WordPress]WordTwit3.0のアップデートとbitlyの設定方法

Nameに「WordTwit」や「WordTwit3.0」と入力すると「WordTwitは既にNameで使われています」というエラーがでました。
もしかすると全アカウント対象で同じ名前にできないのかもしれません。
「ワードツイート」と入力したところ、ひとつのアカウントでは通りましたが、もうひとつの方はダメでした。。
かぶらないためにも適当なわかりやすい日本語がいいかと思います。

次重要です!

WordTwit2 [WordPress]WordTwit3.0のアップデートとbitlyの設定方法

画面上部の「Settings」タブを開いて、「Application Type」にある「Access」を「Read and Write」に変更します。
保存しても元に戻っている時があるので、保存後きちんと設定が変更されているか必ず確認してください。

もし、この設定をしないで、WordPressのWordTwitの設定を進めてしまった場合、WordPressの方を一度リセットしてからやり直すとうまく行きます。

WordTwit3 [WordPress]WordTwit3.0のアップデートとbitlyの設定方法

「Details」タブに戻って、さらに「Access level」が「Read and write」になっているか確認します。

その下に書かれてある「Consumer key(コンシューマー・キー)」と「Consumer secret(コンシューマー・シークレット)」は次のWordPressの管理画面で使用するのでこちらも確認してください。

WordTwit 3.0 の設定

WordPress管理画面の左メニューから「WordTwit 設定」を開きます。

WordTwit4 [WordPress]WordTwit3.0のアップデートとbitlyの設定方法

「Twitter OAuth Credentials」に先ほどの「コンシューマー・キー」と「コンシューマー・シークレット」を入力します。

投稿の文言などを調整する場合は「Publishing Widget」を変更してください。

「ツイート文字数制限を維持するために、投稿タイトルを短縮してください」にチェックを入れると、タイトルが長かった時に140文字以内であっても短縮されてしまうので、私はチェックを外しています。

投稿の表示を変えたい場合は「カスタム」を選択すると文字を編集することができます。

アカウントの追加

WordPress管理画面の左メニューから「アカウント」を開き、「アカウントを追加」をクリックします。

dfa94227903f4cc97b98b0562c9e7656 [WordPress]WordTwit3.0のアップデートとbitlyの設定方法

アカウント許可の画面が開きますので、「連携アプリを認証」を押します。

WordTwit5 [WordPress]WordTwit3.0のアップデートとbitlyの設定方法

アカウント一覧に表示されました。

ここは任意ですが、「プライベートにする」に変更すると、投稿時にどのアカウントでツイートするかを選択することができます。
毎回同じアカウントで投稿する場合、そのまま「共有済み」にしておいて大丈夫です。

以上でWordTwit3.0の設定は完了です!

bitly の設定方法

bitly の API Key

 [WordPress]WordTwit3.0のアップデートとbitlyの設定方法

bitlyにログインして、右上のアカウント名から「SETTINGS」→「ADVANCES」を開きます。

bitly [WordPress]WordTwit3.0のアップデートとbitlyの設定方法

「Legacy API Key」の「Show legacy API key」をクリックするとWordPressの方の入力で必要なAPI Keyを確認することができます。

bitly の設定

WordPress管理画面の左メニューから「WordTwit 設定」を開きます。

bitly1 [WordPress]WordTwit3.0のアップデートとbitlyの設定方法

「短縮方法」で「bit.ly」を選択肢、先ほどの「ユーザーネーム(Login)」と「API キー」を入力すれば完了です。

ツイートを確認する

3260f8469879b7ccc7013d69d4b2e696 [WordPress]WordTwit3.0のアップデートとbitlyの設定方法

投稿画面の右側に設定した通りツイートの表記がされているか確認してください。

3260f8469879b7ccc7013d69d4b2e6961 [WordPress]WordTwit3.0のアップデートとbitlyの設定方法

アカウントを「プライベート」にした場合は、ユーザーアイコンをクリックして、Twitterアカウントを選択する必要があります。
チェックしないまま公開すると、ステータスは「公開済み」になっているのにツイートされてない状態になるので注意です。

582dbbf5f2974bb8dd0e0c0c579687c7 [WordPress]WordTwit3.0のアップデートとbitlyの設定方法

管理画面の「ツイートログ」では、ツイートされなかった場合「失敗」と表示されますのでもう一度設定など問題ないか見直す必要があります。

問題なければ「公開済み」となるので、あとはtwitterの方でも確認して完了です!

【注意】投稿失敗してしまうと投稿数だけURLの最後に「?wt=5」がついてしまいます。
そのツイートのURLからアクセスすると私の本文の上に設置しているようなPocket数などがゼロに表示されてしまうので、気になる場合は失敗した時だけ手動でツイートするなど対処した方が良さそうです。

Pocket
article clipper [WordPress]WordTwit3.0のアップデートとbitlyの設定方法

[WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

こんにちは、@cappeeです。

最近コミュニティ系のサイト制作を依頼されることが多くなってきました。プラスSNSにあるような友達機能も今では必須ですよね。

そんなわがままをWordpressで簡単に叶えてくれるのが「BuddyPress」というプラグインです。とにかく使える機能がすごいです。

今「BuddyPress」を使ってコミュニティサイトを構築中なのですが、インストールの手順や使い方を探していると結構情報が古くなっていて色んな記事を横断したり自分で四苦八苦したので、「BuddyPress」の使い方をメモしておきたいと思います。

WordPressのインストールに関してはこちらを参考にしてください。
【初心者向け】WordPressを使ってゼロから1時間でブログを公開する方法

BuddyPressとは

BuddyPressとは、SNS(ソーシャルネットワーキングサービス)やコミュニティサイトを簡単につくることのできるWordpressのプラグインです。こちらがBuddyPressの公式サイト(英語)になります。

設定画面から機能を拝借すると、下記のようなことが可能で、ユーザーをフォローしたり、メッセージのやり取りをしたり、グループを作成してトピックをたてられたりとプラグインとは思えないほどの便利機能を盛り込んでいます。

一見は百聞に如かず、デモサイトもつくったので手っ取り早く確認したい方はこちらをご覧ください。ご自由に書き込んで使ってみてください。(※適さない発言があった場合は削除する可能性があります)

 [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

Cappee BuddyPress デモサイト

拡張プロフィール
ユーザーが自己紹介できる編集可能なプロフィール欄を使って、コミュニティをカスタマイズしましょう。

アカウント設定
ユーザーがプロフィールから直接アカウントや通知設定を編集できるようにします。

友達関係
ユーザーがお互い友だちになり、気になっている人の活動を集中してフォローできるようにします。

プライベートメッセージ
ユーザー同士が直接、非公開で話すことができるようになります。一対一の話し合いだけではなく、メッセージは複数メンバー間でも送信できます。

活動動向
完全な RSS フィードとメール通知に対応した、スレッド形式コメント付きの全体・個人・グループアクティビティストリーム、直接投稿、お気に入り機能、@ 返信。

ユーザーグループ
グループを使うことで、アクティビティストリームやメンバー一覧とは別の、メンバー同士が話し合える公開または非公開の場を設定できます。

ディスカッションフォーラム
サイト全体およびグループで bbPress ベースのフォーラムを使うと、集中的な掲示板スタイルの会話が可能になります。

サイトトラッキング
サイトの新しい記事とコメントを記録します。

BuddyPressのインストール

47a91ca1e7865977c856078b448bd2d9 1024x196 [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法
Wordpressの管理画面を開き、[プラグイン]→[新規追加]から「BuddyPress」を検索して、「いますぐインストール」後、「プラグインを有効化」してください。

有効化するとプラグインページが開くと思いますが、BuddyPress の Settings を押すと「このページにアクセスするための十分なアクセス権がありません。」と表示されてしまいます。すごい焦ってパーミッションとか確認もしたんですがこの画面は初期設定をまずしないと表示されないようです。非常に紛らわしい文章ですね。。

ちなみに今回インストールしたバージョンは1.6.4です。

BuddyPressの初期設定

初期設定の画面はなんと「ダッシュボード」に隠れています。(こりゃ見つけられないですよね。。)
「BuddyPress Setup」画面を開いてください。

1. Components

eec480eb15802f6cacaa3014e23be348 1024x602 [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

どの機能を導入するかを選択できます。設定はあとで変更できるのでとりあえず「Save & Next」を押して次に進みます。

2. Pages

dc705df52a9c34540e2c8dbf72c02b1a [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

メンバーページやグループページを決められたURLで自動生成する場合(一番楽です)は「Automatically create a page at: http://xxx/xxx/」にチェックを入れます。

URLを変えたい場合は「固定ページ」でページを作成して「スラッグ」にURLで表示する名前を入れてから、また初期設定を行なってください。

※下でご紹介する「BuddyPressの日本語化」を初期設定の前に対応してしまってもいいのですが、2. Pages でURLも日本語化されてしまうため、あとで固定ページからスラッグを変更する必要があります。

3. Permalinks

c8d02badc19c0037d7454ba0d5baece4 [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

パーマリンク(記事を投稿した場合のURL)の設定を行います。カスタムにしたい場合はあとで[設定]→[パーマリンク設定]から変更できます。

4. Theme

41b7a9d8da9052c4a31f907fdcfafa7e [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

サイトのテーマを選択します。デフォルトのデザインを使うか、デフォルトのデザインからCSSでカスタマイズする場合は「Yes, please!」にチェックしてください。

既存のテーマをBuddyPressに対応させたい場合は、「Install BuddyPress Template Pack」をクリックして別途プラグインをインストールします。
既存のテーマを使う場合、後ほど説明するテンプレート用の設定を行うと、デフォルトのテーマファイルが既存テーマのフォルダにコピーされるため、新しく追加されたファイルの調整が必要になります。
HTMLとCSSの知識がないと難しいかと思いますのでご注意ください。

5. Finish

「Finish & Activate」をクリックして初期設定は完了です!
完了するとダッシュボードからリンクがなくなり、今後は設定画面から行うことになります。(完了するとその設定画面が開きます)

現時点でのユーザー画面を確認してみましょう。

003677877b8335801727600cff1ac47f 1024x646 [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

無事に表示されましたか?次からは細かい設定に移ります:)

BuddyPressの日本語化

現状だと管理画面がすべて英語表記なのでBuddyPressの日本語化を行います。

61a275bb269bb8fc671f81f6abf9a270 1024x836 [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

GlotPressのBuddyPressページから「Active」と表示されている数字でかかれた最新バージョンをクリックし、次に言語の一覧から「Japanese」を選択すると上記のような画面が表示されます。
(ちなみに現時点での日本語対応率は97%でした)

画面一番下のプルダウンから「.mo」を選択し、「Export」をクリックして日本語化ファイルをダウンロードします。
ファイル名を「buddypress-ja.mo」に変更し、下記の場所へアップロードしてください。

/wp-content/languages

BuddyPressの設定画面をリロードして日本語で表示されたら成功です!

ちなみに上記 languages フォルダには同じファイル名で「.po」ファイルと「.mo」ファイルがあると思います。
2つの違いは下記になり、用意されたファイルを使って日本語化するだけなら「.mo」のみアップすれば問題ないはずです。

  • 「.po」ファイル … 人が編集できる言語のファイル
  • 「.mo」ファイル … プログラム側で読み込める言語のファイル(.poから.moファイルに変換して使用します)

BuddyPressの詳細設定

日本語化が完了したら改めて管理画面の[設定]→[BuddyPress]よりBuddyPressの設定画面を開きます。

コンポーネント

2bb5e6f412cd021602e44ea60db97adf 1024x494 [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

コンポーネントタブではBuddyPressで使える機能一覧が表示されているので、必要のない機能はチェックをはずしてください。

固定ページ

bf41050a0d19eba4383eed22a38f48eb [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

固定ページタブでは、初期設定の「2. Pages」で自動生成または設定したページが表示されていると思います。

e0981cea35924d0c695b710a74839a32 1024x481 [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

このままだとメニューの名前が英語表記のままなので、管理画面左メニューの[固定ページ]→各ページの[クイック編集]でページタイトルを修正しておきましょう。

設定

5474be2920f3d0a138b10589c6bc7c9a [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

設定タブではコンポーネントで有効にした機能の詳細設定ができますので、必要なものにチェックを入れます。

フォーラム

03f55fbd1d48d31e279b6a09b9fe86ee 1024x425 [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

フォーラムを設置すると掲示板のようにトピックをたてることが可能になり、グルーム毎にフォーラムを使えるようにするか、サイト全体でフォーラムを使うかを選ぶことができます。

「グループとサイト全体のフォーラムの両方を有効化できますが、メンバーには使いづらくなってしまうこともあるかもしれません。」という注意書きもあるのでどちらかを選んだほうがよさそうです。
デモで両方インストールしてみたんですがグループを選択しないと投稿できなかったりして改善できませんでした。どなたか教えてくださいm(_ _)m

グループフォーラムをインストール

グループフォーラムを作成する場合は「グループフォーラムをインストール」ボタンを押し、次画面の「インストール完了」ボタンをクリックすればOKです。

フォーラムの機能は掲示板がつくれるプラグイン「bbPress」を使っており、すでにプラグインをインストールしている場合は「既存のインストールを使用」ボタンを押してください。
WordPressのフォーラムサイトも「bbPress」プラグインを使ってつくられているそうですよ。)

29668c78111c9cd0e129437aa4601898 1024x384 [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

ユーザー画面より「フォーラム」というメニューが追加されているのを確認してください。

サイト全体のフォーラム

グループに依存しないサイト全体のフォーラムを作成する場合は「サイト全体フォーラムの導入」をクリックし、次画面にでる「The bbPress Community」プラグインをインストールして有効化してください。

「Welcome to bbPress」というページが表示されるので、一番下の「Go to Forum Settings」をクリック。フォーラムの細かい設定ができます。

4e540e10da78a25f67b2de371c212eed 194x300 [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

日本語化する場合は上記と同じくGlotPressから.moファイルをダウンロードすることが可能です。(現時点での翻訳率は68%)

設置する場所は異なるので注意してください。下記のプラグインフォルダに置きアップロードします。

/wp-content/plugins/bbpress/languages

グループの作成

現段階で「トピックの作成」をしようとしてもグループがまだないためトピックをつくることができませんので、まずグループを作成してみたいと思います。

ユーザー画面のグループページを開き、「グループ作成」ボタンをクリックします。

1.説明

cb21329c0ed8499668fb859ef6ba37df [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

グループ名と説明を入力し、「グループを作成して続行」ボタンを押して次に進みます。

2.設定

b1bf99f96d62a8a7aaf41e3ef8c08f7d [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

公開設定と招待設定をし、ここでグループのフォーラム作成を有効化するか選択します。

3.アバター

8d0179fff078db5bc214c10edb28c221 [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

何のグループか一目でわかるような画像を設定します。「ファイルを選択」から画像を選択し、「画像をアップロード」ボタンをクリックします。

ed38796f7b5fc77e48ec59fd591a567c [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

ここが嬉しい機能。画像を自分で正方形にトリミングすることができますので、ドラックして位置を調整したら「画像切り抜き」ボタンで次に進みます。

4.招待

c644f2ceab5406adeb821021e811b40e [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

友達がいれば、グループに招待することもできます。

最後に「完了」ボタンを押してグループの作成は終了です。

トピックの作成

ab1497cc1eb8136f1f663804e3ce679e 300x226 [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

フォーラムのトピックを作成するには、[グループ]→該当のグループ名を選択→[トピックの作成]か、[フォーラム]→[トピックの作成]から可能です。

サイドバーのウィジェット

95848c5bea5d05f4c8432111224e3c8c 300x200 [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

サイドバーにグループ一覧やフォーラムを表示できるウィジェットが追加されていますので必要なものを右にドラッグしてください。

活動の管理

d533d42b2dc0aa9a87ea35de04a8b114 300x151 [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

ユーザーの新規登録や友達申請、またはグループやフォーラムで投稿された内容などの活動状況は管理画面左にある[活動]メニューから管理出来ます。

既存のテーマを利用する

既存のテーマをBP化(BuddyPressに最適化)して利用する場合、上記初期設定の「4. Theme」で記述した「BuddyPress Template Pack」プラグインが必要になります。

デフォルトのテーマにあるファイル(/wp-content/plugins/buddypress/bp-themes/bp-default)が既存テーマのフォルダにコピーされるため、新しく追加されたファイルの調整が必要になるのでHTMLとCSSの知識がないと難しくなりますのでご注意ください。

プラグインをインストールしたらまずは[外観]→[テーマ]から使用したいテーマを有効化してください。

そのあと[外観]→[BP Compatibility]を開いて一番下に表示されているボタンをクリックして進むとBP用のテーマファイルが作成されます。

一番最後の画面に表示される「Disable BP Template Pack CSS」と「Disable BP Template Pack JS / AJAX」はチェックしなくても大丈夫です。

be3783098668f7ca6255c1a03ff6ab54 300x197 [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

「Twenty Twelve」のテーマでBP化した場合は上記のようになり、この作業はテーマを変更する度に設定する必要があります。

ホームの表示を変更

デモサイトの用にグループやアクティビティなど上記で作成したページをホームに設定したい場合は、[設定]→[表示設定]→[フロントページの表示]から可能です。

607647c0cfb72efdb7a30fac01482a4b 300x95 [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

「固定ページ」にチェックし、「フロントページ」から表示したいページタイトルを選択してください。

BuddyPress デモサイト

ぜひこちらのデモサイトで使い勝手など確認してみてください。ご自由に使っていただいて大丈夫です。(※適さない発言があった場合は削除する可能性があります)

 [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

Cappee BuddyPress デモサイト

「BuddyPress」プラグインに関する基本的な設定方法は以上です。間違っている箇所があったらお気軽にコメントくださいm(_ _)m

タイトルに「簡単」と入れたましたが、1から実装することを考えれば簡単便利なプラグインと言えますが、機能が充実している分設定は複雑になっていますね。

これからさらにカスタマイズしていく予定ですので、デザインのカスタマイズやBuddyPressの拡張プラグインについても今後ご紹介していこうと思います。

Pocket
article clipper [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

[WordPress] ページ内の目次を自動でつくるプラグイン「Table of Contents Plus」の設定方法

こんばんは、@cappeeです。

最近長い記事も多くなってきたので、ページ内の目次を自動生成してくれるプラグインを導入する時期がきたかなと。

ちょっと前までは「Table of Contents Generator」というプラグインを導入していました。下記などを参考にプラグインを入れた後は問題なく表示されたんですが、すぐにアップデートのアラートがでて、アップデートするとなぜか目次が消えてしまいました。。しばらくアップデートせず初期のまま表示していたんですが、やっぱりアラートが気になる。。
ページ内目次を生成するTable of Contents Generator WordPress pluginを導入

ので、別の目次プラグインを探していたところ、ちょうどいつも拝見してるかちびと.netで「Table of Contents Plus」が紹介されていたので導入してみました。いい感じだったので設定方法など書いておきます。

少しカスタマイズしてますが、こんな感じで目次が表示されますよ。

「Table of Contents Plus」プラグインの設定方法

「Table of Contents Plus」プラグインをインストール

WordPressの管理画面で、プラグインの「新規追加」から「Table of Contents Plus」を検索してインストール、有効化します。

設定ページを開く

「インストール済みプラグイン」の「Settings」か、「設定」の「TOC+」リンクから設定ページを開きます。

プラグインの設定

現時点での私の設定はこんな感じです。カスタマイズしなくても5種類のデザインから選択できるのは嬉しいですね!

TOC Cappee Design WordPress1 [WordPress] ページ内の目次を自動でつくるプラグイン「Table of Contents Plus」の設定方法

  • Position … 目次を掲載する位置。「Before first heading (default)」は最初の見出しの前に掲載
  • Show when … いくつ見出しがあれば目次を自動表示するか
  • Auto insert for the following content types … 目次を表示するページの種類(ブログは「post」をチェック)
  • Heading text … 目次エリアの見出し
  • Allow the user to toggle the visibility of the table of contents …目次をユーザーが隠せるかどうか
  • Show hierarchy … h2,h3の見出しの階層を表示するか
  • Number list items … リストの左にある数字を表示するか
  • Enable smooth scroll effect … 目次のリンクをクリックした時に滑らかなスクロールで移動するか
  • Width … 目次枠の幅
  • Wrapping … 目次を左に表示するか、右に表示するか
  • Font size … フォントの大きさ
  • Presentation … 目次のデザイン。カスタムにするとボーターや背景、見出し文字色、リンク色などを選択できます

設定が完了したら「Update Options」ボタンを押して目次が表示されているか確認します。

また、目次の掲載位置を記事ごと好きな場所に設定したい場合は、投稿画面の「テキスト」タブをクリックし、下記のように記述すれば表示されます。(プラグインの方で位置を設定していても、この記述の位置が優先されます)

<!--TOC-->

残念ながら記事の一覧ページには目次は表示されないようです。(設定ご存知の方いたら教えてください><)

目次をさらにカスタマイズ

以上でも十分なくらいですが、個人的に細かいところをプラグインのphpファイルとCSSを変更してさらにカスタマイズしました。

wp-content/plugins/table-of-contents-plus/toc.php
wp-content/plugins/table-of-contents-plus/screen.css

ulタグをolタグに変更
目次のリストには数字を表示しており、順序のあるリストとなっているので、ulタグではなくolタグに変更しました。
ソースコード内を「ul」で検索してphpファイルとcssファイルを置換します。

リストの数字はリンクさせない
デフォルトだと数字にもリンクが貼られているので、細かいですがSEOを考慮して文字だけにリンクさせました。
「Table of Contents Plus」の設定画面で「Number list items」にチェックをしてください。(チェックしないとリンクが消えてしまいます。)

toc.phpファイルは下記のように変更するときっと同じように表示されると思います。(バージョン 1211 1303.1 現在)
プラグインの書き換えは自己責任で、必ずバックアップをとってから編集するようにお願いします。

// list item 部分を書き換える
<a href=”#’ . $this->url_anchor_target( $matches[$i][0] ) . ‘”>を</span>の後ろに移動します。

// list item
if ( in_array($matches[$i][2], $this->options['heading_levels']) ) {
if ( $this->options['ordered_list'] ) {
// attach leading numbers when lower in hierarchy
$html .= '<span class="toc_number toc_depth_' . ($current_depth - $numbered_items_min + 1) . '">';
for ($j = $numbered_items_min; $j < $current_depth; $j++) {
$number = ($numbered_items[$j]) ? $numbered_items[$j] : 0;
$html .= $number . '.';
}
$html .= ($numbered_items[$current_depth] + 1) . '</span>
<a href="#' . $this->url_anchor_target( $matches[$i][0] ) . '">';
$numbered_items[$current_depth]++;
}
$html .= strip_tags($matches[$i][0]) . '</a>';
}

// assemble flat list 部分を書き換える
<a href=”#’ . $anchor . ‘”>をcount($replace)の後ろに移動します。

// assemble flat list
if ( !$this->options['show_heirarchy'] ) {
$items .= '<li>';
if ( $this->options['ordered_list'] ) $items .= count($replace) . '<a href="#' . $anchor . '">';
$items .= strip_tags($matches[$i][0]) . '</a></li>';
}

目次があると最初に記事全体をざっくり把握できるので読み手は効率的に読むことができるのでいいですよね。
長い記事の場合はマストです。

 

Pocket
article clipper [WordPress] ページ内の目次を自動でつくるプラグイン「Table of Contents Plus」の設定方法

[WordPress] パーマリンク(URL)のオススメ設定2つ

こんにちは、@cappeeです。

今改めてWordPressのパーマリンク(URL)をどうしようか迷っています。

permalink [WordPress] パーマリンク(URL)のオススメ設定2つ

現在はSEOを考慮し、カスタム構造で category+postname を設定し、都度カテゴリのスラッグ(英数字)や記事名を記述しているのですが、設定忘れがどうしても発生してしまうのと、地味な一手間をなくしてもっと効率化したいという点で変更しようか検討することにしました。

現在のWordPressではパーマリンクを変更してもデフォルトで自動的に301リダイレクトしてくれるので安心ですね。ただし、リダイレクトしてくれない設定もあるようなので必ず変更後は確認が必要です。

今まで運用してみた感じと他のブロガーさんの意見も参考に、自分なりにオススメの設定2つをご紹介します。

SEO重視なら category+postname

SEO重視なら私が今まで設定していたようなカスタム構造 category+postname を設定するのがオススメです。

/%category%/%postname%

%category%」には作成したカテゴリー名が入ります。そのままだと日本語で表示されてしまうので、必ず「スラッグ」にURL用の英数字のカテゴリー名を設定しましょう。

%postname%」にもデフォルトだと記事のタイトル名が日本語で入ってしまうので、記事の投稿画面の「パーマリンク」より英数字を設定します。(タイトルに英数字が含まれていると自動的に-をつけて生成してくれます)

※WordPress3.2以前は、「%postname%」「%category%」「%tag%」「%author%」から始まるパーマリンクは、パフォーマンス上の理由で非推奨となっていたようですが、最新のバージョンでは問題ないようです。

パーマリンクのSEO

SEO的にはURLにもキーワードが含まれていたほうが有利ですが、ただ劇的に差がでるかというとそうではなく、コンテンツが一番重要なのはかわりないので、念には念を、というSEO対策になります。

また、カテゴリーを含めた理由として、SEO的にページの構造化はとても大切だからです。あとあとカテゴリー名を変更しなくてすむように、考えてつけなければいけません。投稿時カテゴリーの選択は複数可能ですが、基本的にはカテゴリーはひとつだけチェックした方がいいかと思います。

ページ構造の最適化

上記の設定をするとカテゴリーページが2つできてしまいます。

  • カスタム構造で設定したURL:/%category%
  • デフォルトのカテゴリページURL:/category/%category%

ガッチャンコするために、「WP No Category Base」というプラグインを導入すると、デフォルトのカテゴリーページが「/%category%」というシンプルなURLになるので重複を防ぐことができます。

設定のデメリット

この設定のデメリットとしては、記事ごとに英数字のパーマリンクを設定する必要があるため、地味に一手間かかります。もし過去のパーマリンクと重複してしまった場合、自動的に数字をつけて回避してくれますが、カテゴリー名が違っていても同じ postname をつけることができませんのでご注意ください。

URLを短縮する

さらにURLの一番最後に「/(スラッシュ)」を入れなかった理由としては、最近はなるべくURLを短くするという傾向があるためです。SEO的には「/(スラッシュ)」があってもなくても、「.html」という拡張子を入れても特にかわりません。

SEOと効率化のいいとこ取りなら category+post_id

上記SEO重視の設定でもご紹介した通り、キーワードと構造化の観点からいってもカテゴリー名は設定しておいた方がいいかと思います。カテゴリー名のスラッグ設定もカテゴリーを新規で作成した時に設定するくらいなのでそこまでの手間もかかりません。

さらに効率化を考慮し、記事ごとに設定する必要があった postname ではなく、自動的に生成してくれる post_id にすることでSEOと効率化のいいとこ取りができます。

カスタム構造を下記のように category+post_id に設定します。

/%category%/%post_id%

こちらも「WP No Category Base」プラグインを導入してさらにURLを最適化しておくといいでしょう。

また、同様にURLの一番最後に「/(スラッシュ)」を入れずにURLは極力短縮しています。

ちなみに、カスタム構造で設定できるパーマリンクタグはたくさんあります。

  • %year% 投稿年
  • %monthnum% 投稿月
  • %day% 投稿日
  • %hour% 投稿時刻の時
  • %minute% 投稿時刻の分
  • %second% 投稿時刻の秒
  • %postname% 投稿タイトル(投稿スラッグ)
  • %post_id% 投稿ID
  • %category% カテゴリー名(カテゴリースラッグ)
  • %tag% タグ名(タグスラッグ)
  • %author% 著者名

さて、どちらにするか迷いますね。。どうしようかな。

[参考サイト]
WordPressのパーマリンクはどの形がベストなのか

Pocket
article clipper [WordPress] パーマリンク(URL)のオススメ設定2つ

[WordPress] jQuery Colorbox が動かないのは Head Cleaner の設定が原因

こんにちは、@cappeeです。

WordPress3.5にバージョンアップしてプラグインも色々と追加していたところ、「jQuery Colorbox」プラグインが動かないことに気が付きました…。

もしかしてjavascriptかなと思い関連がありそうだった「Head Cleaner」プラグインを疑う。検索したところ動作しなくなったという声もあり、設定を何回か試して動作を確認してみました。

今回は「jQuery Colorbox」が問題なく動作する「Head Cleaner」の設定方法をご紹介します。他のプラグインでもjavascript関連の不具合はまず「Head Cleaner」を疑ったほうがよさそうですね。試しに一旦「停止」して試してみましょう。

「jQuery Colorbox」が動作する「Head Cleaner」の設定方法

下記の赤枠のチェックボックスを外してください。ただし、その分表示速度の改善率は低くなるのでどちらを優先するかですね。

ちなみに、元々は適切な「Head Cleaner」の設定方法を調べた時にチェックすべき項目として、下記のチェックされた項目+赤字の項目をチェックするようにという記事が多かったです。

head cleaner [WordPress] jQuery Colorbox が動かないのは Head Cleaner の設定が原因

別の方法として「jQuery Colorbox」プラグインのバージョンを3.8.3にダウングレードすると問題なく動作するという記事もありましたが、その方のWordPressのバージョンが書かれてないしリスクも大きいので今回はやめておきます。

WordPressプラグインってどうやってダウングレードするんだろう、と気になったので調べてみました。こちらが参考になります。

WordPressプラグインをダウングレードさせる方法(古いバージョンをダウンロードする方法)

 

Pocket
article clipper [WordPress] jQuery Colorbox が動かないのは Head Cleaner の設定が原因

[WordPress] Open Graph Proを今すぐ停止し、プラグインを使わずにFacebookのOGPを設定すべし

こんにちは、@cappeeです。

WordPressで作ったブログにOGPを設定しようとしたところ、つまづいたのでメモしておきます。

「Open Graph Pro」プラグインを入れてみた

FacebookのOGPを設定するプラグインとして「Open Graph Pro」の評価が高かったので導入してみました。

デバッガーで確認したところ、ページによってIDが認識されなかったり、descriptionが表示されなかったりと結構不具合が。。

といっても便利なプラグインなことに間違いないので、もしphpファイルを直接触るのに抵抗があるという方は「Open Graph Pro」よりインストールしてください。

インストール方法はこちらが参考になります。

 [WordPress] Open Graph Proを今すぐ停止し、プラグインを使わずにFacebookのOGPを設定すべし

Facebookからの流入を増やしたい時、OGPの設定は絶対必要!

上記の記事を書いた方も後々不具合に気づいたようです。
Facebook OGP向けプラグイン「Open Graph Pro」を外した理由

プラグインなしでFacebookのOGPを設定することに

プラグインなしでFacebookのOGPを設定するには、下記が参考にしました。

 [WordPress] Open Graph Proを今すぐ停止し、プラグインを使わずにFacebookのOGPを設定すべし

私がブログでFacebook OGPの設定をプラグインに頼らない2つの理由

個人的に並び方を整理したのと、app_idも追加したのでそのコードも載せておきます。

<!-- ここからOGP -->
<meta property="og:type" content="blog">
<?php
if (is_single()){//単一記事ページの場合
if(have_posts()): while(have_posts()): the_post();
echo '<meta property="og:description" content="'.get_post_meta($post->ID, _aioseop_description, true).'">';echo "\n";//抜粋を表示
endwhile; endif;
echo '<meta property="og:title" content="'; the_title(); echo '">';echo "\n";//単一記事タイトルを表示
echo '<meta property="og:url" content="'; the_permalink(); echo '">';echo "\n";//単一記事URLを表示
} else {//単一記事ページページ以外の場合(アーカイブページやホームなど)
echo '<meta property="og:description" content="'; bloginfo('description'); echo '">';echo "\n";//「一般設定」管理画面で指定したブログの説明文を表示
echo '<meta property="og:title" content="'; bloginfo('name'); echo '">';echo "\n";//「一般設定」管理画面で指定したブログのタイトルを表示
echo '<meta property="og:url" content="'; bloginfo('url'); echo '">';echo "\n";//「一般設定」管理画面で指定したブログのURLを表示
}
$str = $post->post_content;
$searchPattern = '/<img.*?src=(["\'])(.+?)\1.*?>/i';//投稿にイメージがあるか調べる
if (is_single()){//単一記事ページの場合
if (has_post_thumbnail()){//投稿にサムネイルがある場合の処理
$image_id = get_post_thumbnail_id();
$image = wp_get_attachment_image_src( $image_id, 'full');
echo '<meta property="og:image" content="'.$image[0].'">';echo "\n";
} else if ( preg_match( $searchPattern, $str, $imgurl ) && !is_archive()) {//投稿にサムネイルは無いが画像がある場合の処理
echo '<meta property="og:image" content="'.$imgurl[2].'">';echo "\n";
} else {//投稿にサムネイルも画像も無い場合の処理
echo '<meta property="og:image" content="http://cappee.net/wp/wp-content/uploads/IMG_0117.jpg">';echo "\n";
}
} else {//単一記事ページページ以外の場合(アーカイブページやホームなど)
echo '<meta property="og:image" content="http://cappee.net/wp/wp-content/uploads/IMG_0117.jpgg">';echo "\n";
}
?>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>">
<meta property="fb:admins" content="管理者ID">
<meta property="fb:app_id" content="アプリID">
<!-- ここまでOGP -->

ソーシャルボタンの設置方法などはこちらをご覧ください。
ソーシャルボタンの設置まとめとボタンの幅や吹き出しの直し方、コーディング方法など[2013.2.22改正]

管理者IDとアプリIDの取得に関してはこちらをどうぞ。

 [WordPress] Open Graph Proを今すぐ停止し、プラグインを使わずにFacebookのOGPを設定すべし

FacebookのOGPに fb:admins と fb:app_id の設定は必要?htmlタグのxmlnsは?

Pocket
article clipper [WordPress] Open Graph Proを今すぐ停止し、プラグインを使わずにFacebookのOGPを設定すべし

WordPressのサーバー移行方法

こんばんは、@cappeeです。

新しい年になりWordPressのサーバーも心機一転ということで、ブログのサーバーを移行することにしました。

無事移行できたのでその方法をメモしておきます。(ドメインは同じです)

私はXreaからXserverへの移行をしましたが、サーバー移行に至った理由はこちらの「WordPressでサイトをつくる時に比較したサーバーと契約したXSERVERについて」をご覧ください。

サーバー移行前のWordPressデータ

1)WordPressファイルのダウンロード

移行前のサーバーにあるWordPressファイルをすべてダウンロードします。

大量にあるファイルのダウンロードは途中でタイムアウトになったりと地味に時間がとられるので、前回ご紹介したフリーのFTPソフト「Filezilla」を使用するとスムーズです。

2)データベースのエクスポート

WordPressで使用しているMySQLのデータベースをエクスポートします。おそらく大体のレンタルサーバーでデータベース管理ツールの「phpMyAdmin」が提供されていると思うので、それを使用してエクスポートします。

データのエクスポート方法は公式サイトの下記を参考にサイトの投稿、固定ページ、コメント、設定などのSQLデータを保存します。

データベースのバックアップ

移行後のサーバー作業

1)データベースの作成

移行するサーバーの管理画面にログインしてデータベースを作成します。作成方法はご契約のヘルプページをご覧ください。Xserverの場合はこちらの「MySQLの設定」を参考にしてください。

2)wp-config.php の変更

wp-config.php を開き、上記で設定したデータベース名、ユーザー名、パスワード、ホスト名に書き換えます。Xserverの場合、上記MySQL5設定画面の下にある「MySQL5情報」のホスト名に書き換えます。

3)WordPressファイルのアップロード

移行するサーバーに上記でダウンロードした最新のWordPressファイルをアップロードします。ファイルの階層などは変更しないように注意してください。

4)SQLデータのインポート

アップロードを待っている間にSQLデータをデータベースにインポートします。「phpMyAdmin」を開き、1)で作成したデータベース名が左上で選択されているか確認してください。

「インポート」タブを開き、ファイルを選択します。文字コードの変換は「non」のままで実行すればデータの移行は完了です。

phpmyadmin import WordPressのサーバー移行方法

ドメインの設定

移行前のサーバーで設定したドメインを移行後のサーバーに切り替えます。ドメインのネームサーバーを変更する方法は契約のヘルプページなどを参考にしてください。(Googleで「旧サーバー名 新サーバー名 ドメイン」とかで検索してもでてくると思います。)

Value-DomainをXserverへ設定する場合はこちらの「バリュードメインの独自ドメインをエックスサーバーへ設定」をご覧ください。

WordPressの表示確認

上記の作業がすべて完了したら、いよいよWordPressの表示確認をします。設定したドメインで問題なく表示されているか確認してみてください。

問題ない場合は念のため投稿確認もしたら、サーバー移行完了です。お疲れ様でした。

下記は表示確認で私が出会ったエラーたちです。もし出くわしたら都度対応してください。

PHPの対応バーション

「サーバーのPHPバージョンは5.1.6ですが、WordPress3.4.2は5.2.4以上のみでご利用になれます。」と表示されてしまいました。

php ver WordPressのサーバー移行方法

サーバーの管理画面へ行き、バージョンアップを行います。Xserverの方はマニュアルの「PHPのバージョン切り替え」をご覧ください。

データベース接続確立のエラー

wp-config.php が作成したデータベースで設定されているかもう一度確認してください。私はホスト名が「localhost」のままになっていて変更し忘れたのが原因でした。

[参考サイト]
WordPressで公開しているサイトのサーバーを変更する 

Pocket
article clipper WordPressのサーバー移行方法

WordPressでなるべくプラグインを使わずにカスタマイズしてみた

メリクリです。@cappeeです。

先日WordPressでブログを構築しました。私は重くなるのでなるべくプラグインを使わずにカスタマイズしたい派です。そこで今回カスタマイズした機能を一覧でメモしておきたいと思います。

最新の記事にサムネイルを表示する

最新記事を表示する sidebar.php に下記のコードを貼り付けて、表示件数・サムネイルとなるアイキャッチ画像がなかった場合のイメージ・サムネイルのサイズ(ここでは50px)などを指定すればOKです。これなら好きなタグやクラス名を使えるのでとても便利ですね。

<ul>
<?php $posts = get_posts('numberposts=5'); //最新5件を表示
foreach($posts as $post): ?>
 <li>
 <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
 <?php
 if (has_post_thumbnail()):
 $title = get_the_title();
 the_post_thumbnail(array(50,50), array('alt' => $title, 'title' => $title));
 else: //アイキャッチ画像がなかった場合の処理
 ?>
 <img src="<?php bloginfo('template_url'); ?>/images/no_thumb.png" title="<?php the_title(); ?>" alt="<?php the_title(); ?>" width="64" height="64" />
 <?php endif; ?>
 </a>
 <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
 </li>
<?php endforeach; ?>
</ul>

下記を参考にしてますので、詳しくはこちらをご覧ください。

WordPressでプラグインを使わずに最新記事をアイキャッチ(サムネイル画像)付きで表示する方法

人気の記事をサムネイル付きで表示する

人気の記事は「WordPress Popular Posts」というプラグインを使用します。インストールして有効化したら、人気記事を表示する sidebar.php などに下記を貼り付けてください。

<?php get_mostpopular('range=weekly&order_by=views&limit=5&stats_comments=0&pages=0&thumbnail_width=50&thumbnail_height=50&thumbnail_selection=usergenerated'); ?>

また、インストールした timthumb.php に脆弱性があるそうです。その対応も含め詳しくは参考にさせていただいた下記をご覧ください。

WordPress Popular Postsでウィジェットを使わずに人気記事をアイキャッチ(サムネイル画像)付きで表示する方法

最新記事と人気記事を統一する

最新記事で指定したliやaのクラス名を人気記事でも追加したい場合は、「plugins」フォルダの「wordpress-popular-posts」フォルダにある「wordpress-popular-posts.php」を修正します。<li>や<a などでファイル内検索すると探しやすいです。1071行目移行にカスタマイズするソースコードがあるかと思います。

ここまででも一見問題ないのですが、このままだと最新記事はWordPressで自動的に中央をトリミングした正方形のサムネイル画像が表示され、人気記事はトリミングなしの縮小したアイキャッチ画像が表示されてしまいます。そこまで気にしない方はそのままでいいですが、どうも気になります。できれば人気記事の方を最新と同じサムネイル画像にしたかったのですが、なんせプラグインのファイルを修正する必要があるためうまくいきませんでした。ご存知の方がいればご教授いただきたいですm(__)m

そこで、下記のアイキャッチ画像を表示する方法を参考にし、最新記事の方を修正することにしました。

アイキャッチ画像の「URL,横幅,高さ」を取得する[WordPress(WP)]

画像のimgタグを囲っているaタグにはCSSで幅と高さ、そして overflow:hidden; を指定してください。

<ul>
 <?php $posts = get_posts('numberposts=5'); //最新5件を表示
 foreach($posts as $post): ?>
 <li><a href="<?php the_permalink(); ?>">
 <?php
 if (has_post_thumbnail()):
 $title = get_the_title();
 $thumbnail_id = get_post_thumbnail_id($post->ID); //アタッチメントIDの取得
 $image = wp_get_attachment_image_src( $thumbnail_id, 'full' ); //「full」サイズのアイキャッチの情報を取得
 $src = $image[0]; //url ?>
 <img src="<?php echo $src;?>" height="50" />
 <?php
 else: //アイキャッチ画像がなかった場合の処理
 ?>
 <img src="<?php bloginfo('template_url'); ?>/images/no_thumb.png" alt="<?php the_title(); ?>" width="50" height="50" />
 <?php endif; ?>
 </a><a href="<?php the_permalink(); ?>" ><?php the_title(); ?></a></li>
 <?php endforeach; ?>
 </ul>

ページャーをカスタマイズする

デフォルトだとなんとも悲しいページャー(改ページ)なのでプラグインももちろんありますが、プラグインを使わずに index.phpファイルに直接記述してカスタマイズしたいと思います。タグやクラス名も変更することが可能です。

<div class="tablenav"><?php global $wp_rewrite;
 $paginate_base = get_pagenum_link(1);
 if (strpos($paginate_base, '?') || ! $wp_rewrite->using_permalinks()) {
 $paginate_format = '';
 $paginate_base = add_query_arg('paged', '%#%');
 } else {
 $paginate_format = (substr($paginate_base, -1 ,1) == '/' ? '' : '/') .
 user_trailingslashit('page/%#%/', 'paged');;
 $paginate_base .= '%_%';
 }
 echo paginate_links( array(
 'base' => $paginate_base,
 'format' => $paginate_format,
 'total' => $wp_query->max_num_pages,
 'mid_size' => 5,
 'current' => ($paged ? $paged : 1),
 )); ?></div>

色んな方法があるので、参考にしたこちらをご覧ください。

プラグインを使わないでWordPressにページナビを実装してみる

前の記事、次の記事を表示する

記事の詳細ページの終わりに「前の記事」「次の記事」のリンクを表示させる方法です。content-single.php に下記を貼り付けます。

<ul class="clearfix">
 <li style="width:300px;float:left;"><?php previous_post_link('%link', '&laquo; %title', TRUE) ?></li>
 <li style="width:300px;float:right;text-align:right;"><?php next_post_link('%link', '%title &raquo;', TRUE) ?></li>
 </ul>

詳しくはこちらが参考になります。

WordPressで前の記事、次の記事を表示するタグ

以上です。もっともっとWordPressの勉強が必要ですねっ。

Pocket
article clipper WordPressでなるべくプラグインを使わずにカスタマイズしてみた

WordPressのドメイン、wwwあり・なしを変更する方法

@cappeeです。

面倒そうだったので後回しにしていたWordPressのドメイン変更が、わりと簡単だったのでそのメモです。

私の場合は、ドメイン自体を変更したのではなく、wwwありからwwwなしに変更しました。( http://www.cappee.net → http://cappee.net)

とてもスッキリして清々しいです。

WordPressのドメインを変更する方法

ドメイン転送の確認

私のようにwwwあり・なしで設定したい場合、取得したドメインサービスの方で転送設定をしている可能性があるので、まずはそれを解除しておきます。

XREAの場合、下記の転送設定のところに何も記載しないで保存します。(なお、サーバーは今後以降予定です。)

wp domain WordPressのドメイン、wwwあり・なしを変更する方法

WordPressデータの移動

新しいドメインへWordPressデータを移動、またはwwwありのフォルダからwwwなしのフォルダへデータを移動します。WordPressのデータは重いので、私の場合はフォルダ名をwwwなしに変更してしまいました。

アドレスを変更

変更が必要なのは2点、「WordPress アドレス (URL)」と「サイトアドレス (URL)」です。ただし、管理画面から変更してしまうと管理画面も新しいアドレスに変更されてしまいログインできない場合がありますので、phpMyAdminかwp-config.phpで直接変更します。

phpMyAdmin

phpMyAdminで最初に設定したデータベース名を開き、「wp_options」テーブルを表示します。「option_name」の下記に新しいアドレスを設定します。

  • siteurl…WordPress アドレス (URL) 例:http://cappee.net/wp
  • home …サイトアドレス (URL) 例:http://cappee.net

wp-config.php

WordPressデータの直下にある wp-config.php を開き、下記の2行を追加してアップする。

define('WP_SITEURL', 'http://cappee.net/wp');
define('WP_HOME', 'http://cappee.net');

新ドメインに転送する

ドメインを引っ越ししたら古いドメインへアクセスした場合、301リダイレクト(恒久的な転送)をしてGoogleの検索エンジンにサイトを引っ越ししたことをお知らせします。一定期間リダイレクトさせるために古いドメインもある程度維持しておいて計画的にドメイン移行した方が今まで頑張ったSEOが引き継がれます。古いドメイン301リダイレクトに関しては下記をご覧ください。

サイトリニューアル時の301リダイレクト、.htaccess記述方法いろいろ

管理画面から転送する場合の注意点

wwwの変更だけ行った場合、下記のようにドメインサービスの管理画面から転送の設定を行えますが、XREAの場合、管理画面からの転送は302リダイレクト(一時的な転送)になってしまいました。

wp domain2 WordPressのドメイン、wwwあり・なしを変更する方法

下記のチェックツールに旧ドメインをいれると、リダイレクト方法が確認できます。

Search Engine Friendly Redirect Checker

もし管理画面の転送設定で301以外のリダイレクトだった場合は、管理画面の設定を解除して、上記と同じく「.htaccess」で301リダイレクトをしてください。wwwなしの場合は下記のように変更してドメインを記述し、転送したいドメインのフォルダ(wwwありのフォルダ)に保存してアップします。

RewriteEngine on
RewriteCond %{HTTP_HOST} ^(www.cappee\.net)(:80)? [NC]
RewriteRule ^(.*) http://cappee.net/$1 [R=301,L]

WordPressを使用している場合、indexファイルを/に飛ばす指定の下の2行は元々設定してあるので記述しなくても問題ありません。

RewriteCond %{THE_REQUEST} ^.*/index.html
RewriteRule ^(.*)index.html$ http://cappee.net/$1 [R=301,L]

以上でドメイン変更完了です。

Google ウェブマスター ツールに追加

wwwあり・なしの変更であってもGoogleの検索エンジンからは”別ドメイン”という扱いになっているので、「Google ウェブマスター ツール」の右上「サイトを追加」から今回新たに設定したwwwなしのドメインを追加し、表示された内容に従ってサイトの確認を行います。

確認が完了したら、右の[設定]→[設定]→「使用するドメイン」で、「URL を (wwwなし) と表示」にチェックをして保存すれば完了です。

953bafdd1b7bd2f550508504b871d57d WordPressのドメイン、wwwあり・なしを変更する方法

Google Analyticsを変更

Google Analytics」にログインし、右上の「アナリティクス設定」をクリックしたら、「プロファイル」や「プロパティ」のURLを変更します。

「プロパティ設定」には「ウェブマスター ツールの設定」があるので、新しいドメインの方を関連付けておきます。

ドメインを変更した際の修正は以上ですかね。

いずれにせよ、ドメインは変更がないように予めちゃんと決めておくことが大事だということ。

Pocket
article clipper WordPressのドメイン、wwwあり・なしを変更する方法

XAMPPでローカルにテスト環境を構築し、WordPressのテーマをカスタマイズする方法

こんにちは、@cappeeです。

FTPでアップせずに、ローカル環境でさくっと制作したいことってありますよね。

そんな局面に出会ってしまったので、XAMPPをインストールしてローカルにテスト環境を構築してみました。

PHPも実行できるのでWordPressのテスト構築にも便利ですよ。

[2013.4.26]XAMPPのインストール方法に詳細を追加しました。

XAMPP(ザンプ)とは

XAMPPは、ウェブサーバーなど開発に必要な「Apache」「MySQL」「PHP」などのソフトウェアをまとめてインストールすることができます。

自分のPCにインストールすれば、簡単にローカルにテスト環境を構築することができます。

ちなみに、XAMPP(ザンプ)は各ソフトウェアの頭文字をとっているので、覚えやすいですね。

X – Windows、Linux、Mac OS X、Solarisのクロスプラットフォーム
A – ApacheのA
M – MySQLのM
P – PHPのP
P – PerlのP

Wikipediaより

XAMPP for Windowsのインストール

私はWindowsを使用しているのでこちらの「XAMPP for Windows」からインストールしてみます。

apache friends xampp for windows 300x124 XAMPPでローカルにテスト環境を構築し、WordPressのテーマをカスタマイズする方法

インストールしたバージョンは現時点でリリースされたばかりの 1.8.1 です。

「インストーラ」「ZIP」「7zip」よりお好きなものを選択してダウンロードしてください。

インストーラならダブルクリックするとXAMPPのインストール画面が表示されますので、何も変更しないまま「Next>」で進めばインストール完了です。

XAMPPの起動

xampp 300x194 XAMPPでローカルにテスト環境を構築し、WordPressのテーマをカスタマイズする方法

「Apache」と「MySQL」の「Start」ボタンを押してください。

ファイヤーウォールのアラートが表示されることがありますので、その時は解除してください。

設定画面を開く

XAMPP 1.8.1 300x228 XAMPPでローカルにテスト環境を構築し、WordPressのテーマをカスタマイズする方法

上記起動画面の「Apache」の「Admin」ボタンを押すか、「http://localhost/xampp/」をクリックして設定画面を開きます。

初めて表示した場合は言語の選択ページになりますので、「日本語」をクリックします。

次に左メニューにある「セキュリティ」をクリックして設定を…と思ったら文字化けしています。

セキュリティ画面の文字化けを直す

バグなのかセキュリティ画面だけ文字化けしています。

e13fd3bc1bc929cf1a31dd87bd6d202e 300x172 XAMPPでローカルにテスト環境を構築し、WordPressのテーマをカスタマイズする方法

「C:\xampp\security\htdocs」フォルダにある「navi.php」を開いてください。

45行目あたりに言語系の指定があると思うので、一番最後に日本語を追加し、navi-chineseの最後を<p>から<br>に変更します。

下記よりコピーして貼り付けてください。

<a target=_parent href="lang.php?de"><?php print $TEXT['navi-german']; ?></a><br>
<a target=_parent href="lang.php?en"><?php print $TEXT['navi-english']; ?></a><br>
<a target=_parent href="lang.php?es"><?php print $TEXT['navi-spanish']; ?></a><br>
<a target=_parent href="lang.php?fr"><?php print $TEXT['navi-french']; ?></a><br>
<a target=_parent href="lang.php?it"><?php print $TEXT['navi-italian']; ?></a><br>
<a target=_parent href="lang.php?nl"><?php print $TEXT['navi-dutch']; ?></a><br>
<a target=_parent href="lang.php?no"><?php print $TEXT['navi-norwegian']; ?></a><br>
<a target=_parent href="lang.php?pl"><?php print $TEXT['navi-polish']; ?></a><br>
<a target=_parent href="lang.php?pt"><?php print $TEXT['navi-portuguese']; ?></a><br>
<a target=_parent href="lang.php?sl"><?php print $TEXT['navi-slovenian']; ?></a><br>
<a target=_parent href="lang.php?zh"><?php print $TEXT['navi-chinese']; ?></a><br>
<a target=_parent href="lang.php?zh"><?php print $TEXT['navi-japanese']; ?></a><p>

変更したらエンコーディングがUTF-8になっているかを確認してから保存します。UTF-8ですよ!

もうひとつ、「C:\xampp\security\htdocs\lang」フォルダの「jp.php」を開きます。

47行目あたりに「$TEXT['navi-languages'] = “各国語”;」と書いてあると思いますので、その下に以下を追記します。

$TEXT['navi-english'] = "English";
$TEXT['navi-german'] = "Deutsch";
$TEXT['navi-spanish'] = "Espanol";
$TEXT['navi-french'] = "Francais";
$TEXT['navi-italian'] = "Italiano";
$TEXT['navi-dutch'] = "Nederlands";
$TEXT['navi-norwegian'] = "Norsk";
$TEXT['navi-polish'] = "Polski";
$TEXT['navi-portuguese'] = "Portugues";
$TEXT['navi-slovenian'] = "Slovenian";
$TEXT['navi-chinese'] = "中文";
$TEXT['navi-japanese'] = "日本語";

これもUTF-8で保存したら、セキュリティ画面を確認してみてください。

文字化けが直りましたか?

セキュリティ設定

a9252db7759e08e7389c2ecabb762fe1 267x300 XAMPPでローカルにテスト環境を構築し、WordPressのテーマをカスタマイズする方法

初回ではセキュリティの各ステータスが「要注意」となってますので、セキュリティ画面の中盤にあるリンク「http://localhost/security/xamppsecurity.php」を開いて設定します。

9cadda860750b2b0467b57f276d5498f XAMPPでローカルにテスト環境を構築し、WordPressのテーマをカスタマイズする方法

上記の画面が開きますので、MySQLのパスワードXAMPPのベーシック認証のアイパスを設定してください。

パスワードは忘れないようにしてくださいね。

先ほどのセキュリティ画面に戻るとステータスが「安全」にかわりました。

ローカル環境の作業場所

C:\xampp\htdocs

にデータを保存すると下記のURLで見えるようになります。「xxxxx」は保存したファイル名に変更してください。

http://localhost/xxxxx

PHPMyAdminでデータベース作成

PHPMyAdminからデータベースを簡単に作成することができます。

xampp1 300x194 XAMPPでローカルにテスト環境を構築し、WordPressのテーマをカスタマイズする方法

起動画面の「MySQL」の「Admin」ボタンを押すか、「http://localhost/phpmyadmin/」をクリックしてください。

phpMyAdmin 249x300 XAMPPでローカルにテスト環境を構築し、WordPressのテーマをカスタマイズする方法

ユーザ名:root
パスワード:セキュリティ画面で設定したMySQLのパスワード

PHPMyAdminにログインしてください。

9d7feb60ea78e2d1d8d211213e7bd4b3 300x190 XAMPPでローカルにテスト環境を構築し、WordPressのテーマをカスタマイズする方法

上のユーザタブからユーザー画面を開き、「ユーザを追加する」をクリックします。

9d7feb60ea78e2d1d8d211213e7bd4b31 XAMPPでローカルにテスト環境を構築し、WordPressのテーマをカスタマイズする方法

上記を参考に設定してユーザーを追加したら、PHPMyAdminでの作業はとりあえず終了です。

WordPressをインストール

WordPressの公式サイトより最新版をダウンロードしてください。

解凍したファイルは「wordpress」フォルダごと、作業場所の「C:\xampp\htdocs」に移動してください。

http://localhost/wordpress/」にアクセスすると初期画面が表示されます。

あとは画面の表示に従って進めばOKです。

695cdc2fa42220068fbb5b9bf96f37f6 XAMPPでローカルにテスト環境を構築し、WordPressのテーマをカスタマイズする方法

設定ファイルを作成すると、データベースの設定画面が表示されますので、先ほど作成したものを入力します。

データベース名はユーザー名と同一で作成していますので、同じ名前を入力してください。

あとは、サイトの設定画面になるので必要な項目を入力します。

http://localhost/wordpress/」にアクセスし、サイトが問題なく表示されているのを確認してください。

これでWordPressは完了です!

WordPressのテーマをカスタマイズする

下記のフォルダにテーマ用のファイルが格納されています。

wp-content\themes

デフォルトのテーマが2つ入っていると思います。

テーマファイルの構造やファイル名を変更すると動かなくなる可能性があるので、デフォルトのテーマを一旦コピーしてカスタマイズしていくのが早いです。

とてもまとまっているこちらの記事の下の方にある「style.cssの書き方」を参考にテーマ名など入力して、ファイルを変更しテーマをカスタマイズしてみてください。(それにしても良記事ですね。)

WordPressのオリジナルテーマ作成フロー・基本マニュアル

以上です!

みなさんのステキなWordPressライフを願っています。

Pocket
article clipper XAMPPでローカルにテスト環境を構築し、WordPressのテーマをカスタマイズする方法