飲食店でローカルビジネスの構造化データを、WordPress を使って適切にマークアップする方法

拠点を持つ飲食店では、グーグルに適切な飲食店情報を伝えることで、グーグル検索やグーグルマップで検索したとき、検索内容に一致するビジネスの詳細が評されることがある。ローカルビジネスの構造化データを公式ホームページに用意することで、自社の営業時間や価格帯などをグーグルに伝えることができる。これを、WordPress に設定して、利用可能にしよう。

前提

WordPress を使う

出力する構造化データの種類

主に3種類。飲食店情報、パンくずリスト(固定ページの階層を伝える)、ブログの個別投稿情報

手順

  1. 後述のサンプルスクリプトを使って、構造化データを整理する
  2. PHP やHTML のエラーが出ないことをチェックする
  3. サイトに公開して、構造化データテストツールでエラーが出ないことを確認する
  4. サイトをGoogle Search Console で使えるよう登録し、「解析不能な構造化データ」が出ないか、「パンくずリスト」が狙い通りクロールされているか、定期的に確認する

構造化データの要点

  • 個別投稿ページの”headline”, “description”は、HTMLエスケープとバックスラッシュの削除
  • 画像はロゴ画像と、記事投稿時にアイキャッチ画像を用意する
  • 営業曜日、営業時間は自店にあわせて記載する
  • address(住所)、geo(地図座標)は自店のものを記載する

構造化データのサンプルスクリプト

下記のスクリプトを、WordPress テーマ内”header.php” HEAD タグ内(title タグの後ろあたり)に追記する。

 

画像の縦横比を維持したままレスポンシブ化するように、div のようなブロック要素の縦横比を維持するCSSをFLOCSS で書く

何ができるか?

div のようなブロック要素の縦横比を維持するCSSをFLOCSS で書ける。

普通にCSS を書くなら、参考にしたこちらの記事の方がわかりやすい。ありがとうございます。
CSSだけでアスペクト比を固定するテク
https://qiita.com/ryounagaoka/items/a98f59347ed758743b8d

背景

レスポンシブデザインで、複数カラムの一部を画像ではなくテキストの入るブロック要素にして、PC サイズのみカラムの縦横比を維持しようとした。

縦横比を維持したテキストボックスのイメージ

ソース

あとは、維持したい縦横比を計算して、.p-boxratio__XX のクラスを作成し、HTML を作る。

WordPress 更新画面が真っ白になる

WordPress のサイトを複数管理していて、1つのサイトだけ管理画面の更新ページが真っ白になる症状が出た。コードを読む人なら“/wp-admin/update-core.php” に問題があることに気づくだろうが、わたしは解決に結構な時間をかけてしまった。類似した症状は出ないと思うが、一応記録して残す。

時間のない方に、手元で起こった症状と解決策を前述する。

症状

FTP アプリ”Filezilla” で、ローカルからサーバーの特定のディレクトリに”/wp-admin/update-core.php” をアップロードすると、エラーが発生してファイルが破損する。公開サーバーではエラーが出ないので、真っ白になる。

対処方法

  • Filezilla で、[ファイル] → [サイトマネージャ] でサイトマネージャを開き、該当サイトの [転送設定] タブを選択。
  • 表示された画面右側にある [転送モード(T)] の [アクティブ] にチェックを入れて [了解] をクリック。
  • 該当ファイルをアップロードする
  • 「Windows セキュリティの重要な警告」ウインドウが出て、「このアプリの機能のいくつかがWindows Defender ファイアーウォールでブロックされています。」と表示される。「プライベートネットワーク」にチェックを入れて、「アクセスを許可する」ボタンを押す。
  • ファイルが正しく転送されるのを確認する。

次に、経緯の記録を後述する。

WordPress 更新画面が真っ白になる

現状

WordPress を利用している

問題点

WordPress の管理画面から、左メニュー「更新」ボタンを押すと真っ白になる

調査

  • 最新のWordPress をクリーンインストールする
    →同じ症状が出た
  • サーバーのWordPress インストールサービスを使ってインストールする
    →症状が出ない
  • 正しくインストールされたデータをローカルで復元し、ローカルで編集したデータを再度サーバーに復元する
    →同じ症状が出た
  • サーバーで症状が出たWordPress をローカルに復元
    →エラーが表示された。
    C:\xampp\htdocs\site\wp-admin\update-core.php
    プログラム90行目以降のデータが欠損していた
    正常なWordPress の”/wp-admin/update-core.php” を、Filezilla でアップロードすると、転送エラーが表示される。

    エラー: 接続タイムアウト
    エラー: ファイル転送に失敗しました

  • Filezilla の転送タイムアウト時間を200秒に変更
    →同じエラーが発生
  • Filezilla で、[ファイル] → [サイトマネージャ] でサイトマネージャを開き、該当サイトの [転送設定] タブを選択。
  • 表示された画面右側にある [転送モード(T)] の [アクティブ] にチェックを入れて [了解] をクリック。
  • 該当ファイルをアップロードする
  • 「Windows セキュリティの重要な警告」ウインドウが出て、「このアプリの機能のいくつかがWindows Defender ファイアーウォールでブロックされています。」と表示される。「プライベートネットワーク」にチェックを入れて、「アクセスを許可する」ボタンを押す。
  • 正しく転送された

複数の外部WordPress の最新記事を取得し、更新日でソートして降順に並べる

何ができるか

複数の外部ブログの最新記事を取得し、更新日でソートして降順に並べられる

背景

カテゴリが異なるサイトの更新情報を、それぞれのWordPress 記事として投稿している。大本のサイトでは、全情報を表示できるようにしたい。なおかつ、時系列でソートしたい。

技術情報

  • jQuery の$.getJSON(url, function(results){…}) で各店のWordPress ブログ記事を取得
    • getJSON()は非同期通信なので、データ取得後にHTML の描写を行うようにする
  • 取得したJSON データで必要なものをallArticles.push() で格納
    • 配列”allArticles” にオブジェクトを追加している
  • 全データ取得後、underscore.js を使い、allArticles をsortBy() で時系列降順にソート
    • 各店のJSON 読み込みにばらつきがあるので、setTimeout() で2秒の待機時間を付けている
    • allArticles をHTML として書き出す

配列を指定した項目でソートする

事前準備

jquery および、underscore.js を事前に読み込んでおく

underscore.js のsortBy() を使って、数字を降順に並べる

出力結果

year を比較して、降順に並び変わった

JavaScript で、複数の外部WordPress の最新記事を取得し、更新日でソートして降順に並べる

HTML

JavaScript

解説

  • getBlogInfo() で指定されたWordPress のJSON を取得して、ブログ最新記事を変数に格納
  • showBlogInfo() で記事をHTML に書きだす
  • 取得した記事をソートするとき、配列”allArticles”が空だった時が一番作業が煮詰まった。
    jQuery.getJSON() が非同期通信するため、読み込みが終わっていないタイミングで配列を参照していたのが原因だった。
  • 取得した記事のソートはこの部分。”-item.datenum” のマイナスを記載すると、降順になる。

参考

sortBy()
http://www.elder-flower.com/blog/2015/04/sortby.html
sortBy() の使い方

WordPress で運用している複数のサイトの記事を、別のサイトに読み込んで表示する方法

何ができるか?

WordPress で運用している複数のサイトの記事を、別のサイトに読み込んで表示できる。

WordPress のテンプレートタグは使えないのか?

「複数サイト」という条件があると、使えない。

PHP でこれを付けると、同じドメインに限り記事を読み込めるが、「複数サイト」で読み込む方法が見つからなかった。

方法

jQuery で、WordPress のJSON を読み込む

“http://www.hogehoge.com/wp1/” にWordPress がインストールされている場合、次のURL でアクセスすると、JSON が取得できる。

“posts”以降の記述は、”_embed”で写真データを要求、”per_page=3” で記事を3つ取得

HTML の表示部分

JavaScript コード

複数ブログを読み込む

HTML の表示部分

JavaScript コード

Sass, Compass の導入

目的

DreamWeaver などのエディタで、Sass, Compass の自動コンパイルを使えるようにする。

背景

DreamWeaver のCompass コンパイルを使おうとすると、予期せぬ振る舞いでCSS書き出しディレクトリを指定できなかった

参考:DreamWeaver CC を使いWordPress テーマ内でCompass のコンパイルが正常にできなかった

Windows でSass とCompass を使う

SassとCompassのインストールの方法

Ruby をインストールする
Ruby をダウンロードしてインストール
https://rubyinstaller.org/downloads/

  • Ruby 2.x.x-x (x64) – Windows が64bit の場合
  • Ruby 2.x.x-x (x86) – Windows が32bit の場合

インストールの際、オプションの「Rubyの実行ファイルへ環境変数PATHを設定する」にチェックを入れるのを忘れずに。

コマンドプロンプトを立ち上げる
[Windows]キーを押して、”cmd”と入力
gem のバージョン確認

バージョンが出力される

アップデートが始まる

Sass とCompass をインストール

インストールが終わったらバージョンを確認する

バージョンの確認ができれば、インストール済みだと分かる。
※compass のインストールで、新しすぎるruby だとインストールできないエラーが起きた。
この場合、Ruby を一旦アンインストールし、1つ前のバージョンをインストールして試す。

WordPress インストール済みのディレクトリ構造

“config.rb”, “compass_start.bat” はこのあと作成する。

Compass の初期設定

コマンドプロンプトで、Sass, Compass を作成するディレクトリに移動する
面倒なら、エクスプローラーを開いて、該当するテーマのフォルダを開き、アドレスバーを選択(ショートカット[Alt+D])して”cmd”と入力

コマンドプロンプトで次のように入力

実行すると、次のようなファイルが作成される。

“sass”, “stylesheets” のフォルダは今回使わないため、エクスプローラーから削除しておく。

ツールを使って書き出される、デフォルトの設定

これを、WordPress テーマ内の構造に合わせて書き換える

config.rb の記述

CSS はテーマ直下のstyle.css として書き出す

compass_start.bat の設定

メモ帳などのエディタを開いて、下記を記述。

ファイルを保存するとき、テーマ内のフォルダを指定、”compass_start.bat”と名付けて保存
ただし、エクスプローラーで確認すると”compass_start.bat.txt” のようにテキストファイルの拡張子がついていることがあるため、ファイル名の”.txt”を削除

ランチャーを使っている場合、compass_start.bat はランチャーに登録しておく

動作テスト

compass_start.bat を実行
コマンドプロンプトが立ち上がって、監視が始まる

scss/test.scss を作成
試しにCSS を書く

ファイルを保存するとコマンドプロンプトにコンパイルの結果が表示される

書き出しが成功したら、テーマ直下に”test.css” が出力される
compass_start.bat の監視を終了するには、コマンドプロンプトで[Ctrl+C]を押した後のあと”y”と入力して[Enter]を押す

scss/style.scss を作成、WordPress のテーマ設定コメントが消えないようにする

これを

このように書き換え。
コメント開始を”/*!”にすることで、コンパイル時にWordPress で使うコメントが削除されなくなる

DreamWeaver CC を使いWordPress テーマ内でCompass のコンパイルが正常にできなかった

結論から書くと、DreamWeaver CC を使い、WordPress テーマ内にSass, Compass を使う場合は、DreamWeaver のコンパイルを切って、Ruby のコンパイルを使ったほうが時間を無駄にしないと思う。

できたこと

Dreamweaverで覚える最新Web開発ワークフロー: Sass編 を読むと、Ruby の知識がなくても、Sass, Compass が容易に使えるようになる。

ディレクトリ構造は次のような感じ

できなかったこと
wordpress ディレクトリがルートディレクトリで、テーマ内にscss, config.rb, style.css を保存しようとした

コンパイルするとどうなるか?

こうなったり、

こうなる。

これはましな方だが、狙ったディレクトリにCSS ファイルが書き出されない問題は残ったままだ。

Sass だけなら、「サイト設定>CSS プリプロセッサー>ソースと出力」で出力フォルダをテーマ内に指定するだけで、正しく書き出してくれる。だが、同サイト設定で、Compass>「Compass を使用する」でテーマ内のconfig.rb を指定すると、書き出し時のディレクトリ構造がおかしくなる。

まとめ

DreamWeaver CC のコーディング機能は快適で有用だが、Compass のふるまいだけは制御できなかった。