アーカイブ: コラム

WordPressサイトを保守運用するにあたっては、データを定期的にバックアップしておくことが重要です。バックアップを取っておくことで、急なトラブルがあった際にもサイトを元の状態に戻すことができます。

しかし、WordPressで構築されたサイトは静的サイトと比べると取り扱いファイルが多く、どのようにバックアップを取ればよいのか迷いますよね。今回はWordPressサイトの様々なバックアップ方法について紹介いたします。

1. バックアップが必要な理由

WordPressで構築されたサイトは更新管理や機能追加など便利ではありますが、静的サイトと比べると様々な要因によってトラブルが発生する可能性があります。例えば、サイトのセキュリティ侵害、サーバーやデータベースのエラー、WordPress本体・プラグインのバージョンアップによる影響などです。

こうしたトラブルが起きないよう、事前にセキュリティ対策を行うことは基本ですが、それでも運用を続けていくと予期せぬトラブルが生じることがあります。特にデータベースのデータが失われてしまった場合は、元の状態に戻すことが困難になります。トラブルはいつ発生するか予測できないからこそ、サイトデータはこまめにバックアップして、いつでも元の状態に戻せるよう備えておく必要があります。

2. バックアップするデータ

WordPressサイトは静的サイトのようにHTMLやCSSだけで構成されているわけではないので、投稿機能で作成されたコンテンツもバックアップしておく必要があります。WordPressサイトでバックアップすべきデータは主に以下の2種類です。

1. 【Webデータ】
静的ページを構成するファイル。デザインテーマ、アップロードファイル（画像、動画、PDF…）、WordPressプラグインなど。

2. 【データベース】
動的ページを構成するファイル。投稿記事、カテゴリ、コメントなど。

3. バックアップ方法の紹介

3-1. レンタルサーバーの機能を利用

レンタルサーバーを利用している場合、あらかじめバックアップ機能が備わっている場合があります。これらの機能を活用することで、手動でバックアップを作成する手間を省くことができます。

【エックスサーバーの場合】
エックスサーバーでは全プランに「自動バックアップ」が標準機能として備わっています。サーバー上のデータを毎日自動でバックアップしており、Webデータ、MySQL（データベース）のデータを過去14日分、保持してくれます。

申請すればバックアップデータの提供もしてくれるので、特に対策をしていなかった場合でも、エックスサーバーを利用中の方は、最新データを復旧させることができるかもしれません。エックスサーバーでサイトを運用している方は、ぜひ活用していきましょう。

自動バックアップ機能 | レンタルサーバーならエックスサーバー

【さくらインターネットの場合】
さくらインターネットでは「バックアップ＆ステージング機能」が提供されています。ただし、こちらを利用するにはいくつかの前提条件があり、事前に手続きを行う必要があります。

WordPressのスナップショットを作成したい（バックアップ&ステージング） | さくらのサポート情報

前提条件に当てはまらない場合は、次の節で紹介しているWordPressプラグインによるバックアップ方法をおすすめします。

3-2. プラグインを利用

WordPressにはバックアップ用のプラグインがいくつかありますが、その中でもおすすめなのが「BackWPup」です。BackWPupは自動バックアップの便利な機能が揃っており、下記のように細かく設定することができます。

・バックアップのタイミング（毎月、毎週、毎日、毎時）を設定できる。
・バックアップしたい対象ファイルを選択できる。
・バックアップファイルの保存先を指定できる。

以下、BackWPupの簡単な使用方法について紹介します。

1. WordPress管理画面の「プラグイン」から「BackWPup」をインストールします。
2. インストールが完了したら、「有効化」をクリックしてプラグインを有効化します。
3. プラグインの管理画面にアクセスし、「新規ジョブを追加」をクリックします。

4. バックアップジョブの設定を行います。バックアップの種類、対象ファイル、保存場所などを選択します。

5. スケジュールを設定して自動バックアップを行う場合は、タイミングや頻度を指定します。

6. 設定が完了したら、ジョブを保存します。
7. 必要に応じて、手動でバックアップを実行することもできます。


WordPressサイトの定期バックアップの方法としては、BackWPupを利用しておけば問題ないかと思います。

3-3. FTPソフトを利用

FTPソフトを利用して手動でファイルをダウンロードしてバックアップする方法もあります。ただし、WordPressサイトの場合は、WebデータとMySQLデータベースのバックアップが必要なので、サーバーからだけでなくphpMyAdmin等からデータベースを書き出す必要があります。

FTPソフトでの手動バックアップは、時間も手間もかかるうえ、操作ミスなどによるエラーも起きやすいので、定期バックアップには向いていませんが、一手段として知っておくと良いでしょう。

おわりに

今回はWordPressサイトのバックアップ方法について紹介しました。
保守管理しているサイトが表示されないなど、急なトラブルに対処するには定期バックアップしておくことが大切です。重要なデータの損失を防ぐためにも、バックアップの作成は必ず怠らないようにしましょう。

Visual Studio Code（以下VS Code）は2015年にリリースされて以来、多くの開発者に利用されているコードエディタです。
以前「VS Code おすすめプラグイン紹介」の記事で便利なプラグインをご紹介させていただきましたが、今回は、ショートカットキー（以下ショートカット）に焦点をあててご紹介します。
ショートカットはGUIから行える操作をキーボードで行えるようにしたものなので、全てを覚えなくても操作に支障はありませんが、普段繰り返しで行っているような作業は、ショートカットで実施することによって開発を効率化することができます。ぜひ参考にしていただけたら幸いです。

1. よく使うショートカット

こちらは非常に登場する機会が多いショートカットになります。
コピー&ペーストやアンドゥはもちろん、コーディングをしていて意外に多いのは「コメントアウト」の操作だと思うので、「Ctrl/cmd + /」は覚えておくと良いでしょう。

2. 検索系のショートカット

ファイル内もしくはフォルダ全体の文字列の検索/置き換えをするショートカットです。
テキストの一括修正やファイルパスの一括修正で効果を発揮します。

「選択した単語を一括選択」は、検索と置換えに近い操作が行なえます。
単語を選択した状態で、「Ctrl/cmd + Shift + L」を入力すると、ファイル内の同じテキストが全て選択された状態になります。

【選択した単語を一括選択】

3. 移動系のショートカット

行の先頭/末尾へのカーソル移動と、行の移動は地味によく使うので覚えておくと良いでしょう。

【行の移動】

4. その他のショートカット

「選択した行の複製」は、複数行の複製も可能なので、例えばdivで囲っている要素が増えた場合のレイアウトを確認したい、といった際に効率的に作業できます。

【選択した行の複製】

おわりに

今回はVS Codeでよく使うショートカットキーをご紹介しました。
基本的なものではありましたが、意外とGUIから行っている操作もあったのではないでしょうか？

VS Codeに限らず、ツールを使いこなす上でショートカットを知っているかいないかは、作業効率に影響してきます。
是非この機会にVS Codeや普段から使っているツールのショートカットを調べてみてください。

皆さんは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上でもコードを交えた実例をたくさん確認することができるので、フェードするスライダーやレスポンシブ対応のスライダーなど色々なスライダーを実装してみてください。