wordpress5.0 リリースとGutenberg(エディター)

はじめに

wordpress5.0がついにやってきました。

今回は「大幅なアップデート」のため「すぐに更新せず、様子見」が少し必要です。

Gutenbergとは

wordpressのエディターの事です。

すみません、詳細は取り急ぎこちらをご確認ください。

今までとここが違ってくる

  • コンテンツの保存形式が変わる
  • 既存コンテンツは変換される
    • つまり、今まで生成されていたコードが変換されて「思うような記述がされなくなる」「しかも過去の記事もね」という事です。

      ここが危険

      上記で結論を出しましたが、「今まで機能していたものが無効になる可能性がある」という事です。

      ですので、特にビジネス利用の方は「事前テストを行った上での更新」が大事です。

      更新した場合は

      クラシックエディタープラグインを導入すれば良さそうですが、まだSOLALLIANCEではテストを行ってませんので、確定情報ではありません。

      終わりに

      脆弱性を補うために最新バージョンのアップデートは大事ですが、未確認でどんどん行うと予期せぬハプニングが発生する場合があるので、気をつけたいですね。

all in one seo packでseoの対策をする

はじめに

ワードプレスはseoにも非常に有効なcmsの一つです。
世界的にも多く利用されていて、優秀なプラグインも多く存在しますが、ワードプレスのプラグインと言えば?と問われると、よく挙げられるプラグインの一つだと思います。

cmsならではの便利さもありますが、記事やページ毎にmetaを設定するのは一苦労です。

そこでこの「all in one seo pack」の登場です。

このプラグインでは、各ページの設定を細かく行いたい場合に非常に有効的です。

きちんとバージョンアップが行われ、脆弱性の心配が少ないのもメリットかと思います。

具体的な設定は「メタキーワード」や「メタディスクリプション」の簡単な設置、そしてカテゴリーページやタグなどをグーグルにインデックスするかの選択も簡単に行う事ができます。

公式ページ記載のできる事一覧

  • XML サイトマップサポート – Google や Bing や SEO関連にサイトマップを送信
  • 画像 XML サイトマップは画像の SEO を改善するために、Google と Bing に提出しました
  • Google AMP (Accelerated Mobile Pages)に対応。
  • Google アナリティクスのサポート
  • カスタム投稿タイプのSEO対策をサポート
  • 優れたカノニカルURL
  • 添付ファイルのページを親の投稿にリダイレクトする
  • 自動的に Google や Bing などの検索エンジンにサイトの変更を通知します。
  • 内蔵のAPIので、他のプラグイン/テーマは、アクセスして機能を拡張することができます
  • WooCommerce を含む、電子商取引サイトのSEOの統合を提供する無料のプラグイン
  • ノンスセキュリティは All in One SEO Pack に組み込まれています。
  • Google やその他のサーチエンジンのために titles を自動で最適化します。
  • メタタグを自動的に生成
  • WordPress のブログに見られる典型的な重複コンテンツを回避
  • 初心者のために、オプションを確認しなくても、すぐに動作します。ただインストールしてください。
  • 高度なユーザーなら、すべてをSEOに最適化するために微調整をすることができます
  • 任意のタイトルをオーバーライドして、任意の META description と必要な任意の META keywords を設定することができます。
  • 他の多くのプラグインとの互換性
  • 57の言語に翻訳されています
  • PHP 7と100%互換

ダウンロード

お使いのワードプレスへログインをし、プラグインの新規追加からダウンロードをします。

または下記よりダウンロードをします。
ダウンロードサイト引用
2007年から45,000,000回以上ダウンロードされたオリジナルの WORDPRESS SEO プラグイン。
WordPressサイトをSEO最適化するのにAll in One SEO Packを使ってください。
初心者にもやさしく、高度な設定や開発者向けAPIも揃っています。
all in one seo packのダウンロード

インストール

通常通り、ダウンロード後に有効化で完了です。

使い方

上記「公式ページ記載のできる事一覧」に色々と書いておりますが、各種設定以外の通常で使うシーンを使い方として掲載致します。

設定する画面

上記画像の通り、「投稿」や「ページ」を作成する画面の下部に存在します。

①スニペットのプレビュー

その名の通りプレビュー機能です。
検索結果の表示のされ方です。

②タイトル

ブログやページ作成時のタイトルをそのまま使わない場合に、ここで改めてタイトルを設定します。

③ディスクリプション

そのページの説明文です。
検索結果ではタイトルの下に表示される説明部分のところになります。

④キーワード(コンマ区切り)

そのページを特に表すキーワードの設定となります。
例えばこの記事であれば・・

  • ホームページ作成
  • ワードプレス
  • all in one seo pack
  • 使い方

このような感じのキーワードを「,」カンマ区切りで入力します。

その他の設定

あまり使わないかもしれませんが、ここの設定はインデックスなどを「させない」設定です。
もしテストページや画像一枚だけを表示するような「seoに悪影響を及ぼす可能性のあるページ」を作成する場合などがあれば、使用するシーンが発生するかもしれません。

終わりに

割と手間のかかる設定ですが、投稿やページを作成する場合は、このように細かく設定をしておくと「人に優しい(わかりやすい)ページ」となります。
従ってグーグルにも評価されやすいものとなりますので、ぜひ設定をしていきましょう。

conact form 7 とスプレッドシートで「メール取得データ管理をする」

はじめに

サンプル請求や資料請求、アンケートなど様々な情報を収集して管理したいケースが多々あるかと思います。
その時に役に立つのが「メールフォームとスプレッドシートとの連携」です。
いちいち人の手を介して転記しなくても、自動でエクセルに書かれていったらものすごく楽ですよね!

用意するもの

  • できれば「新規アカウント」のグーグルスプレッドシート
  • wordpress(は大前提)
  • contact form 7
  • CF7 Google Sheets Connector←これがキモ

それではセッティングをしていきましょう。

グーグルスプレッドシートの用意

まずはアカウントの作成
グーグルスプレッドシート

※アカウントはなるべく新規で取得ください。
ドライブ内すべての権限を渡す事になりますので、データをたくさん管理しているアカウントではない方が無難です。

↓ログインした状態

contact form 7

ダウンロード >> contact form 7

コンタクトフォームの設定方法は別の記事でお伝えします。

CF7 Google Sheets Connector

こちらもダウンロード >> CF7 Google Sheets Connector
↓ またはwordpress管理画面から検索

次いで設定に入りますが、グーグルのアクセスコードを求められます。

ゲットコードをクリックして、ログインします。

アクセスの許可を求められます

手順に従って進めると、このような完了画面になります。

最終設定

スプレッドシートとコンタクトフォームの最終設定です。

スプレッドシートの設定

  • シート名
  • タブ名
  • 項目設定

今回はテストなのでシート名を「test_sheet」、タブ名を「sheet_01」、項目を「name、phone、age」にしてみました。

コンタクトフォームの設定

おなじみの画面にタブが追加されています。
ここに先ほど設定した「シート名」「タブ名」を入力します。

タイトルも今回はテストなので、関係のある「項目」だけ設定していきます。

送信の設定もお忘れなく

テスト送信

メールフォームから送信

それではテスト送信をしてみましょう♪

期待を込めて送信!

スプレッドシートを見てみる

一瞬で転記されてます。
感動ですね

終わりに

いかがだったでしょうか?

使い方はそれぞれ事業に会ったものを検討頂ければと思います。

資料請求、サンプル請求、お問い合わせ、予約、アンケート、日報、購入履歴・・・本当に色々なデータ取得〜検証や統計などに使えると思います。

コードのハイライトを作るプラグイン

コードのハイライトを作る

ホームページを作成する人なら良く見かける「コードの事例」にハイライトを当てて、ユーザーがコードを識別しやするためのワードプレスプラグインです。

↓このようなもの

 
<ul>
<li>メニュー1</li>
<li>メニュー2</li>
<li>メニュー3</li>
<li>メニュー4</li>
<li>メニュー5</li>
</ul>
 

WP Code Highlight.jsの導入

今回は「WP Code Highlight.js」という超軽量プラグインを使った事例です。

まずは、ワードプレスのプラグインページより新規追加を行います。

WP Code Highlight.jsのインストール

「WP Code Highlight.jsのインストール画面

CDNの設定

インストール〜有効化の後は各種設定に入ります

まず最初にCDNの項目を「Public CDN: cdnjs (highlights.org recommend)」と選択します

コンテンツデリバリネットワーク(英: content delivery network、CDN)とは、ウェブコンテンツをインターネット経由で配信するために最適化されたネットワークのことである。コンテンツ配信網とも。
引用:wiki https://ja.wikipedia.org/wiki/コンテンツデリバリネットワーク
Public CDN: cdnjs (highlights.org recommend)を選択します。

背景色の設定

背景色を選択します。

https://highlightjs.org/static/demo/
こちらのサイトでカラーリングのデモが確認できます。

このブログではレインボーを使用しています。

ハイライトの背景色を選択します。

コード挿入タイプの設定

従来のハイライト挿入の方法は下記のような記述になります。

 
<pre><code></code></pre>
 

が、、、「Enable [code]code content …[/code] support:」にチェックを入れておくと、タグを利用して挿入が楽になります。

タグを使用する場合の選択はこちらで行います。

チェックを入れて活用する場合の記述方法はこちら

[code lang=”言語指定”] code content … [/code]

終わりに

一般ユーザー様には、ほぼ関係のない記事になってしまいました。

なぜならこのwordpressカテゴリは、社内の教科書としての機能を重視したものだからです。

ホームページの運用ノウハウやマーケティングに関しては、別のカテゴリでご案内します