月: 2017年10月

WordPress 内で直接コードを編集できるプラグイン WP Editor

WordPress 使っていると、テーマファイルの編集、PHP や CSS を触る機会があると思います。小さな変更がある際、わざわざ FTP 接続してからファイルをダウンロードするしなければならない事もあると思います。しかし、このプラグイン WP Editor を使う事により、WordPress 管理画面内から、コーディングのソフト (Dreamweaver, Brackets 等) で編集するのと近い感じでコーディングが可能です。ここまでは従来のプラグインでも出来た内容ですが、このプラグインのすぐい所は、投稿やページ内でのテキスト編集でも同じ様な機能で使える事、要は、WordPress のページ編集がそのまま行えてしまう点だと思います。もちろん、プラグインの編集も同じ様に行えます。

導入方法

まずはプラグインをダウンロード、有効化した後、ダッシュボードの左下の方に WP Editor のタブが出来ているのが確認できます。そちらをクリック後、以下の画面が表示されるのでプラグインの設定が可能です。
基本インストール後、テーマファイル、プラグイン、投稿でが有効になるはずです。ここで細かい設定ですが、以下のオプション (Post Editor) で Editor Theme があると思いますが、こちらは好みに応じて変更してみて下さい。筆者は、背景が暗めのEditorが好きなので、”Ruby Blue” を選択してみました。その他は Editor Height (この Editor の高さの設定です。) デフォルトだと 450px でこれだと少し高さが足りない印象があります。600px 位に設定するのがベストです。

その後は、Theme Editor, Plugin Editor も同じ様に設定すれば、結構だと思います。Editor Theme は豊富な種類があるので、好みに応じて変更してみて下さい。

プラグイン導入後

上記の様に、投稿のコードビューが、コーディングソフトの様な画面になりましたね。デザイナーや開発者でコードビューを使っておられる方は大分作業もはかどると思います。
*サーバーの環境によっては、このプラグインが上手く作動しない事もありますので、ご注意下さい。

プラグイン配布元

WordCamp LA 2017 へ行ってきました

2017年9月29日から10月1日に、ロサンゼルスで WordCamp LAX 2017 が開催されました。WordCamp は世界中で開催されている、WordPressに関するセミナーです。もちろん日本でも開催されており、東京や京都などでは大々的に開催されている様ですね。しかし、単に WordPress のセミナーだけでは無く、CSS, WordPress Rest API, SEO, ブランディング, ソーシャルメディアマーケティング等、非常に幅広いジャンルのセミナーが行われ、WordPressにあまり馴染みの無い方でも楽しめる内容になっています。筆者は30日と1日のセッションに参加しました。
内容的には非常に為になる充実したセミナーです。しかも $40 USD、両日昼食、ドリンク付き、Tシャツ付き、更にはアフターパーティーも自由参加（筆者は参加しませんでしたが。）という、非常にリーゾナブルな価格設定も魅力です。

会場 Cal State LA

会場は、Cal State LA という、ロサンゼルスの東に位置する大学の会場、1フロアを貸し切っての開催、合計3室のセミナールームがありました。1室は、実践的なプログラミングのセッション、他2室はスピーチ型なセッションです。同時間帯で行われる為、どちらかのセッションを選らんで参加すると言った方式です。

TECHNICAL SEO BEST PRACTICES FOR PUBLISHERS

こちらは1日目に行われたテクニカルSEOのセッション、Arsen Rabinovich 氏、SEO とソーシャルメディアのの会社を経営されている方です。SEOの基本から、Yoast SEO プラグインを使った（但しあくまで作業効率化、プラグインに頼り切らない）SEO手法の紹介、no-index, no-follow の正しい使い方。Scheme Tag のマークアップによる Google の検索結果の表示の違い。かなり最新のテクニカルSEO、特に内部対策の説明を聞く事ができました。WordPress はもちろん、その他のプラットフォームにも幅広く使えるSEOの知識です。個人的にはこのセッション、と以下に紹介する、Slow sites suck! How to speed up WordPress without touching a line of code. がベストのセッションでした。

SLOW SITES SUCK! HOW TO SPEED UP WORDPRESS WITHOUT TOUCHING A LINE OF CODE.

様々な手法で、WordPressサイトの表示の高速化の手法を説明するセッション。Andrew Wilder 氏、WordPress サイト全般のメンテ、SEO等のビジネスをされている方です。サイトの表示速度は非常に重要です。遅ければ遅くなる程、サイト訪問の離脱率を高めるだけでは無く、Google のSEOの評価にも影響します。内容は、プラグインを用いたサイト高速化の設定、キャッシュ化、画像の圧縮、CDNを用いたサイトのキャッシュ化、Google Speed Insight を用いたウェブサイトの速度測定等、非常に幅広い角度からウェブサイトの表示の高速化の手法を説明するセッションでした。

DISCOVERING THE WORDPRESS REST API

こちらは、WordPress REST API とは？というセッション、全く馴染みの無い方にも WordPress REST API を用いた入門的なカスタム方法の説明をされていました。

WORDPRESS AND FLEXBOX CSS

こちらは、Flexbox CSSの紹介、CSS3から実装された display:flex; の内容を詳しい説明をされていました。Flexbox は、CSS 要素の上下中央揃えに主に使われます。

BRANDING FOR EVERYONE

こちらはブランディングに関するセッション、クライアントとのコミュニケーションを取りつつ、どの様にブランディングを進めるか、またプロモーションの仕方なども紹介されていました。ロゴやデザインのコンセプト等も説明されていて、デザイナー出身の筆者も改めて気づく事がたくさんあったセッションでした。

全ては紹介できませんが、他にも、コマンドラインを使った WordPress のカスタム手法、ソーシャルメディアマーケティングの手法に特化したセッション、プロジェクトマネージメントの手法、予算の立て方からスコープ範囲の設定。などなど、どのセッションも全く外れのない内容でした。

おまけ

こちらが2日間提供される昼食の一つ、数種類からのメニューがあり好きな物を選べるといったシステムです。ホテルの食事に近い感じで、非常においしい。
また企業ブースも充実しており、アメリカの主なホスティング各社、WooCommerce等が参加しており、Tシャツや様々なノベルティがもらえます。もしよければ、ロサンゼルスの WordCamp に参加してみてはいかがですか？筆者も次は日本で開催される WordCamp にも参加してみたいです。

(新) Google reCAPTCHA V2 リキャプチャ設置、設定方法

こちらは、クリックタイプの (以前の) reCAPTCHA 設置方法です。
新しい reCAPTCHA V3 の設置方法については、
(新) Google reCAPTCHA V3 リキャプチャ設置、設定方法 をご覧下さい。

“reCAPTCHA リキャプチャ” は、現在メールフォーム、もしくは会員登録の際等に用いられるスパム防止機能です。こちらは、クリックで認識する新しいタイプ (reCAPTCH V2) の設置方法を記していきます。

続きを読む (新) Google reCAPTCHA V2 リキャプチャ設置、設定方法

本当に効果があるWordPress高速化の設定・高速化プラグイン 2017・2018年度

ウェブ制作の際、ウェブサイトの表示スピードが非常に重要になってきます。表示スピードが遅いウェブサイトは、サイトの訪れた訪問者にも悪影響なだけで無く、SEO的にも悪影響と言われています。Googleもサイトの表示スピードを計測しており、今後はサイトの表示スピードの高速化が重要になってきます。以下、2017・2018年度で実際使用して効果のあった、最新の高速化プラグインを掲載します。

画像サイズ圧縮プラグイン・EWWW Image Optimizer

EWWW Image Optimizer

配布元

サイトの高速化では、画像のサイズを圧縮する事が重要になってきます。ブログ等ではデジカメやブログで撮影した写真をそのままでアップロードしているサイトもたまに見かけます。この EWWW Image Optimizer は既に WordPress のメディアにアップロード済の写真を一括で圧縮する事が可能な非常に便利なプラグインです。インストール後、メディアタブに一括最適化という項目ができるので、そこで画像の最適化ができます。

キャッシュプラグイン・WP Fastest Cache

WP Fastest Cache

配布元

このプラグインは、画像、CSS、Javascript等のキャッシュを設定してウェブサイトを高速化できるプラグインです。キャッシュするだけで無く、html, CSS, Javascriptを圧縮する機能もあります。インストール後、設定より必要な項目にチェックを付けるのみです。基本全部にチェックを付けても問題ないと思いますが、サイトによりきり不具合を起こす場合もあります。その際は該当項目のチェックを外せば問題ありません。

画像を後から読み込む・BJ Lazy Load

BJ Lazy Load

配布元

Lazy Load という最初に画像を全部読み込まず、スクロールした際に画像を徐々に読み込む機能を実装するプラグインです。一番最初に画像を全部読み込まないため、画像の多いウェブサイトには非常に公開があります。

モバイル表示スピードアップ・AMP for WP – Accelerated Mobile Pages

Accelerated Mobile Pages

配布元

AMPは、モバイル環境でウェブコンテンツの表示を高速化します。Google のモバイルで検索をした際、AMP対応しているサイトは、AMP という表示がされています。また AMP 導入のウェブサイトは表示速度が非常に速いのがお分かり頂けると思います。このプラグインは、自分の WordPress のテーマに AMP 機能を導入する物です。ただし、AMPに関しては、あくまで現在の WordPress テーマやデザインをそのまま使うという訳ではなく、AMP用のデザインは別に設定する必要があります。このプラグインは、AMP 用の細かいデザインも可能ですので、モバイルのサイトの高速化をしたい方には最適です。

以下 Wikipedia より AMP のより詳しい説明: Accelerated Mobile Pages (AMP) は、Googleが中心となって立ち上げた、モバイルでのウェブサイト閲覧を高速化することを目的とするオープンソースプロジェクトである[1]。また、AMPの成果物である一連の仕様やライブラリなどについてもAMPと呼ぶ。AMPは、従来より用いられているHTMLなどのウェブ技術を改良したもので、中核となるのはAMP HTMLと呼ばれるHTMLの一種である。

その他プラグイン以外での高速化対応

  • サーバーはなるべく信用のおけるホスティングを利用する（できれば SSD 対応、メモリの容量がある程度高い物が好ましいです。)
  • ある程度カスタムが完了したら、必要のない Javascript や CSS は消去。
  • できる限り使用していないプラグインは、無効化しておく。

もちろんこのブログでも上記の設定 (AMPは除く) を設定しており、そのお陰でウェブサイトの表示も速くなっています。是非一度お試しになってみて下さい。