万能ウィジェット!テキストとカスタムメニュー in WordPressインストール版 ~ WordPress.comからの乗り換え

| 1件のフィードバック

はい、このブログのことです。

このブログをWordPress.comで立てていますが、これをインストール版へ移行することになりました。

外観に関して、ここで構築したものを出来る限りそのままインストール版で再現したいと思ったのですが、あれができない・・・これができない・・・と最初は色々と頭を悩ませました。

が!やっていくとほとんどのことはテキストウィジェットとカスタムメニューウィジェットで実現できてしまいました。

テキストとカスタムメニューがシンプルで万能すぎる!

というわけでこのあたりのことを、WordPress.comとWordPressインストール版を比較しながら何をやったか書いていきます。

基本方針

ちなみにセキュリティやパフォーマンスの観点から、構築する際の方針としては以下の2つがありました。

  • テーマはデフォルトテーマの中から選択し、カスタマイズする
  • プラグインはなるべく使わない

 

使用したWordPress

3.8.2を使用しました。ただし、検証している間にどんどんバージョンアップしていくので、それ以上、という感じです。

 

WordPress.comのテーマEnterprise  TwentyTwelveで代用

本ブログではEnterpriseというテーマを使用しています。背景だけ変えて、ちょっと変化を出しています。

このテーマをインストール版で使用することはできませんでした(テーマによっては使用できるのもあるかも)。

また、デフォルトテーマをカスタマイズして使用しようと決めていたので、インストール版に移行するに当たって選択肢は以下の3つ。

  • Twenty Fourteen(黒いの)
  • Twenty Thirteen(派手なの)
  • Twenty Twelve(白いの)

WS000028

 

 

 

 

 

 

 

 

 

一番シンプルなTwenty Twelveに決定。背景を設定すれば今と同じ雰囲気にできる。

ちなみにデフォルトテーマを選択するメリットとしてもう一つあるのは、レスポンシブになっていること。他のテーマだとどこかバグっていたり、自分で一から作成すると結構時間がかかります。これをしなくて済むのはかなりお得です。

 

WordPress.comのRSS -> カスタムメニューウィジェットで代用

Enterprise テーマには、ヘッダー部分にデフォルトでRSSが取得できるリンクが配置されていて、ブログの投稿とコメントのフィードを取得することができます。

WS000029

 

 

 

Twenty Twelveでもやろうと思えば同じことをできますが、かんたんな方法でかつデフォルトの機能でなるべく実現したかったため、今回はカスタムメニューウィジェットで代用。

1. メニュー作成

管理画面 > 外観 > メニューへ進みます。

下図のように、リンクを追加してメニューを作成します。URLは相対パスでもOK。

 

WS000030

 

 

 

 

 

 

 

 

2. ウィジェット設定

管理画面 > 外観 > ウィジェットへ進みます。

左ペインから右ペインへカスタムメニューをDrag&Dropで追加します。

以下のように先ほど作成したメニューをドロップダウンリストから選択して保存すれば完了。

WS000031

 

 

 

 

 

サイドバーには以下のように表示されます。

WS000032

 

 

 

今回はメニューを使いましたが、テキストウィジェットにしてRSSのアイコンを付けるのもありですね。

 

WordPress.comのリンクウィジェット -> カスタムメニューウィジェットで代用

リンクウィジェットは、インストール版でも3.4あたりまではあったようです。

3.5からなくなったからリンクウィジェットのプラグインを入れた、という記事をちらほら見かけました。

が、プラグインなど無くてもカスタムメニューで全然間に合います。カスタムメニューを使いましょう。

設定方法は上記に同じなので省きます。

 

WordPress.comの画像ウィジェット -> テキストウィジェットで代用

画像ウィジェットはテキストウィジェットで十分。

テキストウィジェット内ではHTMLが記述可能なため、imgタグで書けばよいだけです。

1. メディアへ画像をアップロード

管理画面 > メディアへ進みます。

配置したい画像をアップロードします。画像はサイドバーの幅に合わせておく。

2. テキストウィジェットを設定

管理画面 > 外観 > ウィジェットへ進みます。

左ペインから右ペインへ「テキスト」をDrag&Dropで追加します。

画像のみを配置したいので、タイトルは空欄にします。

値には以下の様なコードを記述します。

<a href=”[ここにリンクを記述]”>
<img src=”[ここにファイルパスを記述]”/>
</a>

WS000033

 

 

 

 

 

 

 

 

 

 

これで完了です。

WordPress.comの Facebook Like BoxとTwitterウィジェット -> テキストウィジェットで代用

WordPress.comではFacebookとTwitterの専用ガジェットがあります。

このブログではこれらを使い、infoScoopのFacebookページとinfoscoop_jpアカウントのTwitterタイムラインを配置していました。

FacebookやTwitterではウェブサイトに配置する埋込みコード作成ツールがあるので、専用ガジェットやプラグインが無くてもインストール版のテキストウィジェットで同様のことが実現できます。

1. Facebookの埋め込みコードを生成

以下ページで項目を記入・選択して[Get Code]を押すとコードが生成されます。(ログインと、既存のものが無い場合はアプリ作成が必要)

https://developers.facebook.com/docs/plugins/like-box-for-pages/

2. Twitterの埋め込みコードを生成

以下ページを見ながらコードを生成します。

https://dev.twitter.com/ja/docs/embedded-timelines

Twitterでは埋め込みコードはアカウントに紐付いて保存しておけるようです。

3. WordPressでウィジェット設定

管理画面 > 外観 > ウィジェットへ進みます。

左ペインから右ペインへ「テキスト」をDrag&Dropで追加します。

Facebookの開発者サイトで生成したコードをテキストウィジェットの中身に記述します。scriptタグもdivタグもどちらもここに書いてしまいます。

Twitterについても同様に別のテキストウィジェットで設定します。

サイトを確認すると、きちんと表示されています。

WS000034

WS000035

 

 

 

 

 

 

 

 

 

まとめ

WordPress.comではきっと色々とプラグインを入れているのですね。

比較してみるとインストール版は本当にシンプルです。

万能ウィジェット!テキストとカスタムメニュー in WordPressインストール版 ~ WordPress.comからの乗り換え」への1件のフィードバック

  1. ピンバック: 万能ウィジェット!テキストとカスタムメニュー in WordPressインストール版 ~ WordPress.comからの乗り換え infoScoop開発者ブログ | ミリオンハイスクール | ネットビジネス | WordPress

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>