ワードプレス ラボ

当サイトでは、ワードプレス関連の情報を紹介しつつ、私が勉強しながら作成したワードプレスのテーマ「ShapeShifter」とプラグインも数点配信しています。

一応当サイトで配信する「テーマ」と「プラグイン」は、全て公式リポジトリにアップロードする予定のものですので、当サイトから直接ダウンロードできるコンテンツのダウンロードリンクは、審査をパスして公式リポジトリが利用できるようになれば、(当サイトでいちいち管理するのは面倒なので)公式のダウンロードリンクへ張り替えていく予定です。

※ 只今当サイトで直接ダウンロードできるテーマ「ShapeShifter」は、自動更新用サードパーティ製クラス「Theme Update Checker」などは使用しておりませんので、公式リポジトリが利用できるようになるまでは、管理画面から直接更新が出来ません。

テーマ「ShapeShifter」

当サイトでも使用しているワードプレステーマで、無料で配信しております。

テーマ「ShapeShifter」 プラグイン「Theme Check」

テーマ「ShapeShifter」 プラグイン「Theme Check」

冒頭にも書きましたように、公式リポジトリの利用を考えていますが、現在レビュー中です。

テーマ「ShapeShifter」の機能拡張プラグイン「WP Theme ShapeShifter Extensions」は公式リポジトリにアップロードしておりますので、テーマと合わせてご利用ください。リポジトリ利用までプラグインのアップデートチェックにより管理画面より更新も可能となります。

チケットはこちらで確認できます。テーマの更新具合や僕とレビュアーとのやり取り(主にダメ出し)も見ることが出来ます。

テーマ「ShapeShifter」の特徴の1つは、ウィジェットエリアとオリジナルウィジェットを活用することで、非常に柔軟なレイアウトを作ることが出来ることです。「解説ページ(準備中)」を用意しておりますので、詳細はそちらでご確認できるようになっています。

こちらでは簡単にまとめていますが、このサイト自体もテーマ「ShapeShifter」のサンプルとなっています。

上部のスライダーなどはプラグイン「WP Theme ShapeShifter Extensions」を有効化することで利用可能です。

 

豊富なウィジェットとウィジェットエリア

ウィジェットエリア

ウィジェットエリア

テーマ「ShapeShifter」オリジナルのウィジェットには、全て出力条件を設定することが可能で、「ホーム」「フロントページ」「投稿タイプ」「閲覧端末」などの条件を設定して出力を変化できます。

そして、ウィジェットが1つも出力されないサイドバーは使用されていないと判断されますので、ウィジェット配置のみでコンテンツエリアのカラム数が変化させることが可能です。

用意しているオリジナルウィジェットは「ウィジェットの解説ページ」で解説しており、ウィジェットエリアの詳しい解説は「ウィジェットエリアの解説ページ」でしています。

豊富なテーマカスタマイザーの設定項目

テーマカスタマイザー パネル

テーマカスタマイザー パネル

テーマ「ShapeShifter」では、サイトの外観をテーマカスタマイザーである程度自由に変化させることが可能です。

出力される位置毎にパネルが用意されており、これら全てのカスタマイザーの項目がライブプレビューに対応していますので、設定を変更する毎にページが更新されることはありませんので、反映を待って煩わされることなく変更することが可能です。

モバイル端末用の出力

PageSpeed Insights

PageSpeed Insights

テーマ「ShapeShifter」では、パソコン用とモバイル端末用の表示を用意することで、モバイル端末で閲覧する時の不要な出力を減らす工夫が施されています。例えば、標準的に備わっているサイドバーなどのウィジェットエリアはモバイル端末では表示されず、「外観」->「テーマの設定」ページで追加できるウィジェットエリアを利用して、コンテンツの上部やスライド式のサイドメニューなどに出力出来るようになっています。

コンテンツの出力もそうですが、テーマからは余計なCSSも出力されません。

※ スクリーンショットのページ速度(グリーンカラー)は、出力するアイテムや背景画像などの要素にもよります。

※ モバイル端末での閲覧は、横幅の最小サイズを320px(iPhoneシリーズの一番最低横幅に合わせています)と想定していますので、レスポンシブに横幅が変化するようにはなっていますが、それ以下のサイズにはどこまで対応できるかは保証しかねます。

SEO関連

「外観」->「テーマの設定」ページにて、SEO関連の設定も可能です。

  • Twitter Card(ツイッター用)
  • Open Graph(フェイスブック等のSNS用)
  • カノニカルリンク(重複コンテンツの登録を避ける)
  • Robotsメタの自動出力(タグページなどを自動で「noindex」にするなど)
  • ページのJSON構造化データ

などの設定が可能で、各コンテンツの編集ページでもメタボックスを用意して、「テーマの設定」でのSEO設定に優先的に適用されるように出力可能です。

プラグイン「Magic Inliner」

「wp_enqueue_style」と「wp_enqueue_script」で出力されるCSS・JSファイルを、全てインライン出力に変換します。

HTTPリクエストしなくなりますので、その分の読み込みが改善されることが期待できますし、非同期による出力がありませんので、依存関係も保たれて出力されます。

設定項目は一切ありません。有効化し、一度公開ページをロードするだけです。

ダウンロード:Magic Inliner

プラグイン「Magic Template Holder」

プラグイン「Magic Template Holder」 編集ボタン

プラグイン「Magic Template Holder」 編集ボタン

編集ページの「メディアを追加」ボタンの横に、ボタンが2つ追加されます。

プラグイン「Magic Template Holder」 テンプレート挿入

プラグイン「Magic Template Holder」 テンプレート挿入

左の挿入ボタンをクリックすると、スクリーンショットのようなフォームがポップアップし、コンテンツ編集を簡単にしてくれます。

テンプレートを使用してブログの記事などを作成ししている場合、「リストタグ」「見出しタグ」「テーブルタグ」「広告タグ」などをストックしておき、編集ページで自由に引き出すことが可能になり、作業効率が一気に上がります。

ページを定期的に更新する人に向いています。

プラグイン「Magic Template Holder」 テンプレート作成

プラグイン「Magic Template Holder」 テンプレート作成

また、右の作成ボタンをクリックすれば、ページをリフレッシュすることなく編集ページから直接テンプレートを作成することも可能ですので、ページ編集中に「使いまわせる」と思った時に簡単にテンプレートとして保存することも出来ます。

ダウンロード:Magic Tempalte Holder

プラグイン「WP Evernote Synchronizer」

ワードプレスのコンテンツページとして、「Evernote」からノートをインポート(もしくは更新)することが出来るプラグインです。

先に書いておきますが、トークン以外の設定は他のユーザーにも適用されます。

WP Evernote Synchronizer Evernotes Settings 1

WP Evernote Synchronizer Evernotes Settings 1

共通の設定でトークンを入力した場合、ユーザーIDが「1」の管理者の元にページがインポートされます。トークンはリンク先で「Evernote」のアカウントにログインするだけで生成できます。

ステータスはインポートした時の状態のことで、「下書き(Draft)」「公開(Publish)」を選択できます。初期値は「下書き」に設定されています。また、トークンを設定できるユーザーもこの設定に左右されます。「下書き」の場合だと「投稿編集権限(edit_posts)」を持つユーザー、「公開」だと「投稿公開権限(publish_posts)」を持つユーザーに限定されます。

サスペンドモードは停止モードのことで、設定ページで変更するだけでなく、プラグインを停止することでも自動的にONになります。ただし、停止モードにしていてもCronは機能している状態です。

インターバルの時間の単位は「分」です。最小値を「10」に設定しており、最大で「1440」に設定することが出来ます。

WP Evernote Synchronizer Evernotes Settings 2

WP Evernote Synchronizer Evernotes Settings 2

次はインポート(更新)する投稿タイプについてです。

プラグイン「WP Evernote Synchronizer」は、Evernoteのノートブックの名前を投稿タイプに結びつけることで、それぞれの投稿タイプのページとしてインポートします。

ワードプレス側では、インポート出来るようにする投稿タイプにチェックを入れ、ノートブック名を指定するだけです。

あとは、トークンを設定した「Evernote」の共通アカウントと各ユーザーのアカウント側で、ノートブックを作成し、その中でページを追加すれば、インポートするノートの対象となります。

注意点として、同じノートブック名を2回使うことだけはエラーの原因になりますので、止めるように書いています。いや、実は改善できるんじゃないかと思っているんですが、既にアップロードしてしまいましたので、取り敢えず結果が出てリポジトリが利用できるようになってから考えます。

初期値はどれも使用される言語や投稿タイプを追加しているプラグインの設定にもよっても異なりますので、複数の投稿者がいる場合は特に、分かりやすいノートブック名を指定してください。

 

 

WP Evernote Synchronizer Evernotes Settings 3

WP Evernote Synchronizer Evernotes Settings 3

最後の共通設定として、「除外タグ(?)」なるものを用意しています。

ノートブック内でもこのタグを付けているだけでインポートするのを回避できます。

未完成のノートを不用意にワードプレスにインポートしないための措置として用意しており、コンマで区切って複数設定することが出来ます。

プラグイン「WP Evernote Synchronizer」 あなたのプロフィール

プラグイン「WP Evernote Synchronizer」 あなたのプロフィール

ユーザー毎に自分の「Evernote」のアカウントを設定することも出来ますので、投稿者が複数いる場合でも使えるようになっています。

最後は「あなたのプロフィール」の下の方に用意した設定項目です。

トークンの設定項目のみですが、共通設定ページにアクセス出来ないユーザーも、ここで設定されている「ノートブック名」や「除外タグ」などを確認することが出来ます。

また、「Update Now」で自動更新を待つこと無く、各ユーザーのタイミングでインポートすることも出来ます。

インポートされるノートは、インポートしたユーザーのIDが作者として使用されます。

ダウンロードリンク: WP Evernote Synchronizer

プラグイン「WP Theme ShapeShifter Extensions」

テーマ「ShapeShifter」に拡張機能を追加できるプラグインです。

※ テーマ「ShapeShifter」もしくは子テーマ利用時のみ機能します

追加機能は以下の通りです。

  • カスタムウィジェット
  • オプショナルウィジェットエリアの編集
  • カスタムフォント(ブラウザAPIキーでGoogle Fontsも)
  • カスタムCSS(CSSファイルをアップロード)
  • エディタースタイル
  • TinyMCEボタン
  • アーカイブページの投稿リスト用のSNSシェアボタン
  • ページ毎にウィジェットの出力設定可能
  • などなど

今度もテーマ「ShapeShifter」の機能を拡張するような更新は、プラグイン側での更新が必要になってくると思いますので、従来(バージョン1.0.18まで)の機能を含め、「ShapeShifter」の機能を存分に発揮するにもプラグイン「WP Theme ShapeShifter Extensinos」のご利用をお勧めいたします。

まだテーマは承認されていないんですが、承認されたら「更新情報」などで報告致します。