アーカイブ: コラム

皆さんはWebサイトの予約システムというとどのようなものをイメージされますでしょうか？
一見、導入が難しそうに見える予約システムも、WordPressの無料プラグインを使えば必要最低限の設定で導入することができます。ただ、予約システムは利用者によって求める機能が様々で、例えばサロンであれば担当者ごとの予約を管理する必要がありますし、宿泊業であれば日をまたいだ予約の管理が必要です。

今回は飲食店などにオススメの「時間枠」ごとの予約が可能な「MTS Simple Booking」をご紹介いたします。今後予約システムを導入する際の参考にしていただければ幸いです。

1. 前提

・ WordPressはインストール済であることを想定しております。
・ 本手順はWordPressをローカル（MAMP）に構築した手順になっています。
・ MTS Simple BookingはWordPress ver3.5以上、PHP5.6以上が推奨されています。

2. MTS Simple Bookingの特徴

MTS Simple Bookingは無料の予約システムプラグインです。有償版もありますが、基本的な機能であれば無料版で網羅されています。予約システムプラグインとしては珍しい国内製なので、日本語のドキュメントがあり、比較的導入の敷居が低いです。

主な特徴としては以下のとおりです。

・ 予約の上限を予約「件数」か予約「人数」で管理できる
・ 日本の予約システムで一般的な「予約確認画面」がある
・ カレンダーに空き状況が○△×で表示される
・ 入力項目はデフォルトから増やすことはできない。（削ることは可能）

3. 導入手順

続いて、導入の手順を説明していきます。

3-1. インストール

MTS Simple BookingはWordPress管理画面からではなく、公式サイトからダウンロードします。
MT Systems公式サイトにアクセスして、最新バージョンの「ダウンロード開始」をクリックしてください。



zipファイルがダウンロードされるので、解凍したフォルダを、WordPressのプラグインフォルダ( wp-content/plugins )にコピーします。



WordPress管理画面からプラグインのメニューを開くと「MTS Simple Booking-C」が追加されているので、有効化を押してインストールは完了です。

3-2. 初期設定

有効化すると管理画面に「予約品目」「予約システム」のメニューが追加されます。



まずは「予約システム > 各種設定」から初期設定を行います。



■予約パラメータ
基本的には入力項目ごとに説明を用意してくれているので、大きく迷うところは無いと思います。
必ず設定しなければいけない項目として、「予約の受付」はチェックを入れます。こちらが無効になっていると、カレンダーが表示されず、代わりに「予約中止中のメッセージ」が表示されます。
それ以外の項目は、任意の項目を設定してください。

■施設情報
予約完了メールに記載される店舗情報などを設定します。また、予約完了メールの送信先にするアドレスをここで設定します。
「Webサイト」は必要に応じてサイトトップページのURLを設定する等してください。

■予約メール
予約メール本文の編集が行なえます。本文には予め用意された[ 予約者の名前 ]などの変数を使うことができます。また、予約時にユーザーに入力してもらう項目の必須・任意・不要が設定できます。
項目を削ることはできますが、オリジナルの項目を追加することはできません。

3-3. カレンダーの設定

続いて「予約品目 > 新規予約品目」からカレンダーを追加します。予約品目 = カレンダーと思っていただいて大丈夫です。
カレンダーのタイトルには予約画面に表示したいタイトルを入力してください。今回は「ご予約」としました。



少しスクロールすると「予約時間割」と「予約条件設定」のメニューが出てきます。

■予約時間割
受付する時間を追加します。10:00~12:00の間営業していて1時間ごとに予約を受け付ける場合、以下のように設定します。



■予約条件設定
予約を「件数」で管理するか、「人数」で管理するかの設定が行なえます。
また、定員や予約一件あたりの最少人数・最大人数の設定が行なえます。
今回は以下のように設定しました。後ほど予約画面にどのように反映されるのか確認していきます。
設定が完了したら忘れずに「公開」を押します。



最後に「予約システム > スケジュール」から予約受付する日を選択します。
本記事公開日は3月27日(月)なので、毎週金曜日を定休日と仮定して27~30日にチェックを入れたいと思います。
4月以降も受付する場合はドロップダウンから4月を選択し、同様の作業を行います。
入力が終わったら、「スケジュール保存」をクリックします。



以上で、カレンダーの設定は完了です。

3-4. 埋め込み

カレンダーを表示させるには任意の固定ページにショートコードを貼り付けます。
サイトのトップには設置できないのでご注意ください。
ショートコードは以下の形で入力します。

[monthly_calendar id=〇〇]

〇〇の部分は「予約品目 > 作成した予約品目」のURL、post=〇〇の数字を入力します。



今回はWordPressインストール時に用意されている固定ページ「サンプルページ」を以下の通り「予約ページ」に修正しました。





固定ページへアクセスし、カレンダーが表示されることを確認します。



これでひとまずカレンダーの表示までは確認できたかと思います。金曜日もちゃんと予約できないようになっていますね。
続いて、予約確認画面と予約完了画面を作っていきます。
とはいっても、それぞれ指定されたスラッグの固定ページを新規で作成するだけなので、以下の通り作成してください。

■予約確認画面
スラッグ名：booking-form



■予約完了画面
スラッグ名：booking-thanks



これで埋め込みも完了です。

3-5. 動作確認

続いて、ちゃんと予約が行えるか動作確認をします。
予約ページのカレンダーから任意の日付を選択します。



続いて、予約したい時間を選択します。



予約確認画面に遷移するので、予約人数や　名前、電話番号など基本情報を入力します。
今回は予約上限に設定した4名で予約してみます。



問題なければ「予約確認 > 予約する」とクリックして、予約完了画面が表示されるのを確認してください。
最後に予約者側、管理者側ともにメールが届いていることを確認します。

【予約者】

【管理者】


あらためて同じ時刻を予約しようとしても、上限の4名に達しているので、ちゃんと予約できなくなっていますね。

おわりに

今回は予約システムプラグイン MTS SImple Booking をご紹介しました。
最低限の予約機能であれば簡単な設定で導入ができるのがイメージできたかと思います。

予約システムプラグインは今回紹介したもの以外にも非常に多くの種類があります。
冒頭でもご説明しましたが、求める機能によって適したプラグインは変わってきますので、予約システムで何を実現したいかを整理した上で選定しましょう。

企業のコーポレートサイトのメインビジュアルや、商品ページの画像など、スライダーを使ったUIは2023年現在でも多く見受けられます。スライダーはページの速度を低下させることもありますが、ファーストビューで多くの情報を伝えられるというメリットもあります。

そんな中でも今回はYouTubeのスライダーをサムネイルのナビゲーション付きで実装する方法をご紹介します。昨今は動画コンテンツの重要性もますます高くなってきているため、スライダーに組み込む方法を知っておくと良いでしょう。

1. 準備するもの

スライダーの実装には、jQueryのプラグインを使います。その中でも、最もユーザー数が多くカスタマイズも柔軟にできる「slick」というプラグインを使います。

slickの基本的な使い方は過去の記事で紹介しているので、そちらを参考にしてください。
「画像スライダープラグイン「slick」の使い方」

slickはローカルにファイルをダウンロードする方法とオンラインのファイルを使う方法（CDN）があります。今回はCDNを使う方法で説明します。

2. 手順

完成イメージは以下です。

2-1. HTMLに必要なコードを追加する

まずは以下のようなHTMLを用意します。画像は任意の画像でOKです。

<div class="slider">
	<div><img src="https://picsum.photos/id/236/720/360" alt=""></div>
	<div><img src="https://picsum.photos/id/237/720/360" alt=""></div>
	<div><img src="https://picsum.photos/id/238/720/360" alt=""></div>
	<div><img src="https://picsum.photos/id/239/720/360" alt=""></div>
	<div><img src="https://picsum.photos/id/240/720/360" alt=""></div>
</div>
<div class="slider-nav">
	<div><img src="https://picsum.photos/id/236/300/200" alt=""></div>
	<div><img src="https://picsum.photos/id/237/300/200" alt=""></div>
	<div><img src="https://picsum.photos/id/238/300/200" alt=""></div>
	<div><img src="https://picsum.photos/id/239/300/200" alt=""></div>
	<div><img src="https://picsum.photos/id/240/300/200" alt=""></div>
</div>

また、<head>タグ内に以下を記述します。

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>

続いて</body>タグ直前行に以下を記述します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

2-2. JSファイルを作成する

JSファイルを作成します。このJSに必要なオプションを記述することで、スライダーのスピードや、ナビゲーションの有無などをカスタマイズすることが可能です。

$(function(){
  $('.slider').slick({  //スライダー本体
    dots: false,          //ドットは非表示に
    arrows: false,        //矢印も非表示に
  });
  $('.slider-nav').slick({  //サムネイル側
	dots: false,              //サムネイル側のドットも非表示に
    arrows: true,             //サムネイル側の矢印は有効に
    prevArrow: '<img src="arrow-left.png" class="slide-arrow prev-arrow" />',//「前のスライド」ボタンを左矢印アイコンに変更。class名「prev-arrow」を追加。
    nextArrow: '<img src="arrow-right.png" class="slide-arrow next-arrow" />',//「前のスライド」ボタンを右矢印アイコンに変更。class名「next-arrow」を追加。
    asNavFor: '.slider',      //.sliderのナビゲーションとして使用するオプション
    slidesToShow: 3,          //表示するスライド数
    focusOnSelect: true,      //クリックでスライドを選択できるようになる
  });
});

その他のオプションについてはslick公式サイトの「settings」をご参照ください。

HTMLに以下を記述し、JSを読み込みます。

<script src="slider.js"></script>

この時点で以下のような簡易的なスライダーができていると思います。まだスタイルはあたっていません。サムネイルをクリックしてスライダー本体も切り替わることを確認してみてください。



こちらのslider本体にYouTubeの埋め込みリンク、サムネイル部分にYouTubeサムネイル画像を設定することで、サムネイル付きのYouTubeスライダーが実現できます。

次はYouTubeにアクセスし、埋め込み用コードを取得します。

2-3. YouTube動画の埋め込み用コードとサムネイルを取得する

■埋め込み用コードの取得
以下の手順で取得できます。

動画URLにアクセス > 共有 > 埋め込む > URLをコピー



■YouTubeサムネイルの取得
以下のサイトに動画URLを入力することででサムネイルが生成できます。
「YoutubeサムネイルURL取得」

今回は「320×180」のものを使用します。

2-4. HTMLに埋め込み用コードとサムネイルを記述する

sliderクラスの<img>タグを埋め込み用コードに差し替え、slider-navクラスの<img>をYouTubeのサムネイルに差し替えます。

<div class="slider">
  <div><iframe width="560" height="315" src="https://www.youtube.com/embed/-3echUj1GrM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div>
  <div><iframe width="560" height="315" src="https://www.youtube.com/embed/REyqibYs1Fg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div>
  <div><iframe width="560" height="315" src="https://www.youtube.com/embed/_sDRktNsS4M" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div>
  <div><iframe width="560" height="315" src="https://www.youtube.com/embed/M8lUJN0X9ok" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div>
  <div><iframe width="560" height="315" src="https://www.youtube.com/embed/wjoIiLiADLE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div>
</div>
<div class="slider-nav">
  <div class="item"><img src="http://img.youtube.com/vi/-3echUj1GrM/mqdefault.jpg" alt=""></div>
  <div class="item"><img src="http://img.youtube.com/vi/REyqibYs1Fg/mqdefault.jpg" alt=""></div>
  <div class="item"><img src="http://img.youtube.com/vi/_sDRktNsS4M/mqdefault.jpg" alt=""></div>
  <div class="item"><img src="http://img.youtube.com/vi/M8lUJN0X9ok/mqdefault.jpg" alt=""></div>
  <div class="item"><img src="http://img.youtube.com/vi/wjoIiLiADLE/mqdefault.jpg" alt=""></div>
</div>  

再読込して以下のようになっているのを確認してください。

2-5.デザインを整える

最後にデザインを整えて、完成です。

/* スライダーのスタイル */

.slider {
    text-align: center;
}

/* ナビゲーションのスタイル */

.slider-nav {
    width: 80%;
    margin: 30px auto 0 auto;
}

.slider-nav .slick-list img　{
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
}

.prev-arrow {
    position: absolute;
    top: 100px;
    left: -40px;
}

.prev-arrow:hover {
	cursor: pointer;
}

.next-arrow {
    position: absolute;
    bottom: 100px;
    left: unset;
    right: -40px;
}

.next-arrow:hover {
    cursor: pointer;
}

おわりに

今回はYouTubeのサムネイルつきスライダーの実装方法を紹介しました。
今回実装したもの以外にも、slickには多くのオプションが用意されており、様々なバリエーションのスライダーが実装できます。
Web上でもコードを交えた実例をたくさん確認することができるので、フェードするスライダーやレスポンシブ対応のスライダーなど色々なスライダーを実装してみてください。

WordPressサイトを構築する際、セキュリティ対策はちゃんと考えていますか？
初心者でも簡単にWebサイトを作ることができることから世界的に多く利用されているWordPressですが、多く利用されているということは悪意を持った第三者のターゲットになりやすいということでもあります。
主なセキュリティ対策としてWordPress本体及び、プラグインを最新のバージョンに保つなどいくつかありますが、今回はセキュリティプラグイン「SiteGuard WP Plugin」を紹介したいと思います。

1. SiteGuard WP Pluginとは

SiteGuard WP PluginとはWordPressにインストールするだけでサイトのセキュリティを向上させることができるプラグインです。
機能ごとに詳細な設定をすることができるので、自分に必要な機能だけ有効化することも可能です。

2. 機能紹介

SiteGuard WP Pluginには以下の機能があります。

管理ページアクセス制限

管理ページに対する攻撃をブロックします。
ログインしていない接続元に、管理ページ（/wp-admin/以降）へのアクセスを 404 Not Found で返します。この機能を除外するパスを個別で設定することも可能です。
管理ページアクセス制限 – WebセキュリティのEGセキュアソリューションズ

ログインページ変更

ログインページ（/wp-login.php）のURLを変更します。
ログインユーザー名とパスワードの組み合わせを探る攻撃は、その大半が機械的に行われており、それはデフォルトのログインページに対して行われます。ログインページを変更することで、これらの攻撃の対象になる機会を減らすことができます。
ログインページ変更 – WebセキュリティのEGセキュアソリューションズ

画像認証

ログインページ、コメントページ、パスワード確認ページ、ユーザー登録ページに、「ひらがな」または「英数字」４桁による画像認証を追加します。
ユーザー名、パスワードを機械的、あるいは人的に探る攻撃を困難にします。
画像認証 – WebセキュリティのEGセキュアソリューションズ

ログイン詳細エラーメッセージの無効化

この機能は、ログイン失敗時に何が間違っているのかを知らせないように、すべて同じエラーメッセージにするものです。
デフォルトではログインに失敗すると、間違っているのはユーザー名なのか、パスワードなのか、あるいは、画像認証なのかをエラーメッセージで知ることができます。何気ないエラーメッセージですが、これは攻撃者への大きなヒントとなってしまうため、エラー文を全て同一にすることで不正アクセスを防止します。
ログイン詳細エラーメッセージの無効化 – WebセキュリティのEGセキュアソリューションズ

ログインロック

機械的なログイン試行をブロックする機能です。
同一接続元からの連続したログイン失敗を検出して、当該接続元からのログインをロックします。多くの接続元を使用する攻撃や、ゆっくりとした攻撃には効果がない場合があります。
ログインロック – WebセキュリティのEGセキュアソリューションズ

ログインアラート

ログインすると、ログインユーザーにメールが送信されます。
ログインした心当たりがないのにメールを受信した場合は、不正ログインを疑ってください。
ログインアラート – WebセキュリティのEGセキュアソリューションズ

フェールワンス

この機能は、ログインが成功する場合でも、一度失敗させて次の組み合わせの試行に進ませることで、攻撃をかわすことを目的としています。
フェールワンス – WebセキュリティのEGセキュアソリューションズ

XMLRPC防御

XML-RPCピンバックを利用したDDoS攻撃や、XML-RPCを利用したブルートフォース攻撃から防御します。
XMLRPC防御 – WebセキュリティのEGセキュアソリューションズ

ユーザー名漏えい防御

“?author=数字”のアクセスによるユーザー名の漏えいを防止します。
ユーザー名とパスワードの組み合わせでログインしますが、ユーザー名が分かると後はパスワードだけですので、攻撃者はパスワードの推測に専念できます。ユーザー名は伏せておいた方が安全です。
ユーザー名漏えい防御 – WebセキュリティのEGセキュアソリューションズ

更新通知

WordPress、プラグイン、テーマについて、更新情報がある場合に、メールでお知らせします。
メールは管理者になっているユーザー宛に送信されます。
更新通知 – WebセキュリティのEGセキュアソリューションズ

WAFチューニングサポート

WebサーバーにJP-Secure製WAF SiteGuard Server Editionが導入されていて、正常なアクセスがWAFによって遮断されてしまう場合に、それを回避するルールを作成することができます。
WAFチューニングサポート – WebセキュリティのEGセキュアソリューションズ

ログイン履歴

どのユーザーがいつログインしたのかが履歴となって残ります。

3. 導入方法

導入方法は至ってシンプルです。
①WordPress管理画面「プラグイン」より「新規追加」をクリック
②キーワードに「SiteGuard WP Plugin」と入力
③プラグインが表示されたら「今すぐインストール」→「有効化」

インストールした段階で基本的な設定はされているので、あとは自分にとって必要、不要だと思う項目をON/OFFすれば完了です。

おわりに

今回は手軽にWordPressサイトのセキュリティ強化ができるプラグイン「SiteGuard WP Plugin」を紹介しました。
細かな設定が分からないWordPress初心者でも、インストールするだけで最低限のセキュリティ強化が可能なとても優秀なプラグインです。
WordPressインストール時に最初にインストールするプラグインとして覚えておいても良いのではないのでしょうか？
セキュリティ問題を起こしてしまってからでは取り返しがつかないので、そうなる前に可能な限り対策しておきましょう。

WordPressのオリジナルテーマを作成する際、CSSやJavaScriptファイルをどこで読み込んでいますか？WordPressを勉強したての方は、HTMLの時と同じように ヘッダー用テンプレートファイル（header.php）の<head>要素内に直接リンクを記述しているという方が多いのではないでしょうか。

しかし、WordPressの公式マニュアルには「ヘッダーテンプレートにテーマのスタイルシートをリンクしないでください」と記載されており、functions.php の中で wp_enqueue_style( ) や wp_enqueue_script( ) を使用して読み込むことが推奨されています。

WordPressを勉強したての方がつまづきやすいポイントでもあるかと思うので（私もそうでした）、今回は functions.php でのCSS、JavaScriptの読み込み方について紹介したいと思います。

1. header.phpでの読み込みの問題

そもそもheader.phpでの読み込みは何が問題なのでしょうか？HTMLの時と同じように<head>要素からリンクしても、サイトの見た目は問題なく表示されますよね。

例）<head>での読み込み

<head>
  〜
  <link rel="stylesheet" href="css/style.css">
  <script src="js/style.js"></script>
</head>

しかし、表面上では問題なくても裏側では問題が発生している可能性があります。

例えば、WordPressプラグインの中にはインストールして有効化した際に、外部のJavaScriptライブラリを使用している場合があります。header.phpで同じライブラリを読み込んでいた場合、ファイルが重複や競合をしてしまい、プラグインが正しく動作しなくなる恐れが出てきます。

また、JavaScriptを</body>直前で読み込みたい場合は、header.phpではなくfooter.phpに記述する必要が出てきます。このようにテンプレートファイルに直接記述する形だと、読み込ませたい位置にリンクを追加していくことになり、あとでファイルの追加や削除が発生した際にすべてのファイルを修正する必要があるなど、メンテナンス性の低下が問題となってきます。

2. functions.phpでの読み込み

公式が推奨するfunctions.phpでの読み込みでは、同じファイルの重複や競合を回避したり、JavaScriptの読み込み位置も変更することが可能です。また、CSSやJavaScriptを一元管理できるのでメンテナンス性も大きく向上します。

以下はfunctions.phpでCSSやJavaScriptを読み込む場合の記述例になります。

function add_link_files() {

  // CSSの読み込み
  wp_enqueue_style( 'common',　get_stylesheet_directory_uri().'/css/common.css' );
  wp_enqueue_style( 'my-style', get_stylesheet_directory_uri().'/css/style.css', array('common'));

  // JavaScriptの読み込み
  wp_enqueue_script( 'my-script', get_template_directory_uri().'/js/script.js', array('jquery'), false, true );
}
add_action( 'wp_enqueue_scripts', 'add_link_files' );

「wp_enqueue_style( )」 と「wp_enqueue_script( )」は単体では使うことができないため、まず「add_link_files（名前は任意）」という関数にまとめます。そして10行目の「add_action( ’wp_enqueue_scripts’, ‘関数名’ ); 」というアクションフックに関数名を記述することで読み込ませることが可能になります。

ここからはCSS、JavaScriptを読み込むための関数について紹介します。

2-1. CSSの読み込み（wp_enqueue_style）

CSSの読み込みには「wp_enqueue_style( )」という関数で記述します。

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

2-2. JavaScriptの読み込み（wp_enqueue_script）

JavaScriptの読み込みは「wp_enqueue_script( )」という関数で記述します。

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

スクリプトを実行するタイミングは基本的にHTMLの読み込みが完了してからの方が望ましいので、$in_footerの値をtrueにして</body>直前で読み込むようにしましょう。

2-3. 特定のページに読み込み

CSSやJavaScriptを特定のページにのみ読み込ませたい場合もありますよね。その場合は下記のようにページの条件分岐タグで対応することができます。

条件分岐の記述例

function add_link_files() {

  // コンタクトページでのみ読み込み
  if ( is_page('contact') ) {
	wp_enqueue_style('flow', get_stylesheet_directory_uri().'/css/flow.css');
  }
  // エラーページでのみ読み込み
  if ( is_404() ) {
    wp_enqueue_script('reload', get_template_directory_uri().'/js/reload.js', false, true);
  }
}
add_action( 'wp_enqueue_scripts', 'add_link_files' );

おわりに

今回はfunctions.phpでCSSとJavaScriptを読み込む方法について紹介しました。
WordPressを勉強したての方にとっては、いきなりfunctions.phpに触れるのは少し抵抗があるかもしれませんが、WordPressを使用する上で必須の知識となりますので、しっかり身に付けておきましょう。
また、functions.phpは不要なコードを削除してサイトを軽量化したり（過去記事を参照）、プラグインをカスタマイズするなど、今後も利用する機会が多くあります。あまり触れてこなかった…という方は、今回の記事をきっかけに試していただけたら幸いです。