皆さんこんにちは！IWACODEの岩村です。

WordPressのカスタムフィールドを利用する際、Custom Field Suite（CFS）を使っていた方も多いでしょう。しかし、脆弱性の発見により、現在CFSの使用を見直す必要が出てきています。多くの方が代替としてAdvanced Custom Field（ACF）を検討していますが、ACFの無料版には繰り返しフィールド機能がなく、リピーター処理ができない点で悩んでいる方も少なくありません。

そこで今回は、Lazy Blocksというプラグインを使って、繰り返し処理に対応したブロックの作成方法をご紹介します。

Lazy Blocksの特徴

Lazy Blocksは、WordPressのブロックエディター（Gutenberg）でカスタムブロックを作成・管理できるプラグインです。特に、繰り返しフィールド（リピーター機能）を簡単に実装できる点で優れています。以下に、Lazy Blocksの主な特徴をまとめました。

Gutenberg完全対応

Lazy BlocksはGutenbergエディターに完全対応しており、ビジュアル的なブロック編集が可能です。これにより、コーディング不要でカスタムブロックを作成できます。

繰り返しフィールドのサポート

ACF（無料版）で対応が難しい繰り返し処理も、Lazy Blocksでは簡単に設定可能です。これにより、商品リストやスタッフ紹介ページなど、複数の要素を繰り返し表示したいケースに適しています。

カスタムフィールドの柔軟性

Lazy Blocksは、テキスト、画像、数値、リストなど多様なフィールドタイプをサポートしており、フィールドのグルーピングや条件付き表示にも対応しています。

Lazy Blocksのインストール、設定の手順

次に、CFSで作成していたカスタムフィールドをLazy Blocksに移行する手順を説明します。

今回はスタッフ紹介のブロックを作成し、WordPressのPHP関数を使用し取得してみようと思います。

Lazy Blocksのインストールと設定

WordPress管理画面でLazy Blocksをインストール、有効化します。

有効化すると管理画面に以下のように表示されます。

Lazy Blocksを有効化したら、「Lazy Blocks」→「新規投稿を追加」からブロックの作成を開始します。フィールド名やフィールドタイプを設定していきます。

※サンプルブロックは必要ないので削除して問題ありません。

ブロックを作成

このような画面が表示されるので、以下の手順にて登録していきます。

1. ブロック名を入力（ひとつ前の画面に一覧として表示されます）
2. SLUG名を登録（PHPにて取得する際にこちらの名称をキーにして取得します）
3. アイコンを設定します。グーテンベルク上で表示されるアイコンです。
4. カテゴリを設定します。作成したブロック定義をグーテンベルク上の選択画面のどのカテゴリに入れるかの指定になります。
5. グーテンベルク上でデータを登録する際に、グーテンベルク上で操作するのか、それとも右側の入力エリアで操作するのかの指定となります。

繰り返しの項目を作成

次に繰り返し項目（リピーター）を設定していきます。

1. 繰り返し項目の名称を登録します。グーテンベルク上で表示されるラベルとなりますのでわかりやすい名前が良いです。
2. NAMEを登録します。DBに登録する際のキーとなる情報になるので、他と被らないように指定してください。後ほどPHPで取得する際にこちらの値を指定します。
3. リストから繰り返しを選択します。※結構下の方にあります。
4. こちらは繰り返し項目を追加していた際に表示される名称となります。グーテンベルク上では{{#}}には連番が割り当てられるため、実際には｛｛｝｝は表示されません。

繰り返し内の入力項目を作成

今回はスタッフ紹介のため、以下の項目を作成します。

• スタッフ画像（image）
• スタッフ名（text）
• ひとことコメント（textarea）

Hide Child Controlsを押下し、繰り返しの中に入力項目を作成します。

画像

1. LABELに名称を設定
2. NAMEにキー情報を指定
3. TYPEに画像で指定

テキスト

1. LABELに名称を設定
2. NAMEにキー情報を指定
3. TYPEにテキストを指定

テキストエリア

1. LABELに名称を設定
2. NAMEにキー情報を指定
3. TYPEにテキストエリアを指定

設定したブロックを公開

画面右上の公開ボタンを押して保存します。
※上記の画像は既に公開ボタンを押しているため、ボタンの名前が「保存」になっています。

スタッフ紹介ブロックが作成されています。

グーテンベルク（ブロックエディタ）にてデータの登録

グーテンベルク（ブロックエディタ）上で、実際にデータを登録していきます。

ブロックの中に「スタッフ紹介」が追加されています。

こちらを選択すると、以下のようにエディタに追加されます。

+Add Rowを押下して画像、スタッフ名、ひとことコメントを登録してきます。

３名分追加してみました。

PHPファイルにて取得する

今回作成したブロック、登録した値を取得するコードのサンプルとなります。

<?php
// ブロックデータを取得
$blocks = parse_blocks(get_the_content());

foreach ($blocks as $block) :
  if ($block['blockName'] === 'lazyblock/block-staff') :

    $staff_list_json = urldecode($block['attrs']['staff-list']);
    $staff_list = json_decode($staff_list_json, true);

    if (!empty($staff_list)) :
      foreach ($staff_list as $staff_item) :
        $staff_image = $staff_item['staff-image']['url'];
        $staff_name = $staff_item['staff-name'];
        $staff_message = $staff_item['staff-message'];
?>
        <div class="staff-introduction">
          <div class="staff-image">
            <img src="<?php echo esc_url($staff_image); ?>" alt="スタッフ画像">
          </div>
          <div class="staff-info">
            <h3 class="staff-name"><?php echo esc_html($staff_name); ?></h3>
            <p class="staff-message"><?php echo esc_html($staff_message); ?></p>
          </div>
        </div>
<?php
      endforeach;
    endif;
  endif;
endforeach;
?>

主な処理内容

ブロックデータの取得

$blocks = parse_blocks(get_the_content())で、現在のページからすべてのデータを取得します。

対象ブロックの判別

取得したブロックデータの中から、blockNameがlazyblock/block-staffであるブロックを判定します。

  if ($block['blockName'] === 'lazyblock/block-staff') :

データのデコード

urldecode()関数を使用して、エンコードされたスタッフリストデータをデコードし、json_decode()関数でJSON形式のデータをPHPの配列として変換します。

    $staff_list_json = urldecode($block['attrs']['staff-list']);
    $staff_list = json_decode($staff_list_json, true);

データがエンコードされていたため、上記の処理にてデータが正常に見えるように調整しております。

スタッフデータのループ処理

デコードしたデータが存在する場合にのみ、各スタッフの情報をループ処理で展開します。

if (!empty($staff_list)) :
  foreach ($staff_list as $staff_item) :

出力結果

CSSは最低限とし、ページ上出力した結果が以下のようになります。

  .staff-introduction {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ddd;
    width: min(964px, 100%);
    margin: 0 auto;
    padding: 30px 0;
  }

  .staff-image img {
    width: 150px;
    border-radius: 50%;
    margin-right: 20px;
  }

  .staff-info {
    display: flex;
    flex-direction: column;
  }

  .staff-name {
    font-size: 1.2em;
    margin: 0;
    font-weight: bold;
  }

  .staff-message {
    margin-top: 10px;
    font-style: italic;
    color: #555;
  }

さいごに

いかがでしたでしょうか。

Lazy Blocksの繰り返し処理について解説させていただきました。

グーテンベルクの中でデータの登録などができるため、操作性も良く、カスタムフィールドについてはLazy Blocksで運用したほうが良い気もします。

CFSは色々な方がブログでオススメしていたプラグインなので、使用されていた方、使用しているサイトも多いです。

プラグインの脆弱性が発見され、そのまま放置しておくとサイトの乗っ取りや個人情報の流出など、セキュリティ事故が発生してもおかしくありません。

現在CFSは公式からダウンロードができなくなっているため、影響範囲としては過去に制作したサイトが対象となり、できるだけ早い対応が望まれます。

今回の記事が少しでも参考になりましたら幸いです！

最後までご覧いただきありがとうございました！

今回ホームページの公開をBizメール＆ウェブ（NTTのホスティングサービス）というレンタルサーバにすることになりました。

XServerのように「WordPress簡単インストール」は用意されておらず、MySQLやphpMyAdminをインストール、有効化を自身で実施しなければなりません。

とはいうものの特に難しい操作は特になく、本記事にて紹介する手順で問題なくインストールができるかと思いますので、これからBizメール＆ウェブにWordPressを導入する際にはこちらの記事がご参考になりましたら幸いです。

Bizメール＆ウェブとは

NTTが提供しているレンタルサーバ（ホスティングサービス）の一つで、Xserverやロリポップなどと同様にホームページをアップし公開することが可能です。

上記のレンタルサーバと違うところは、マルチドメインが使用できないため、1つのサーバアカウントに対して、登録できるドメインは１つということ。

複数ドメインを取り扱うことが想定される際には、必然的にほかのサーバ会社を選ぶことになるかと思います。

WordPressの簡単インストールがないため、多少操作の工程が増えますが、WordPressを使用することは可能です。

ですが、ルートディレクトリやFTPの知識がないと、少し戸惑うことが出てくるかもしれません。

以下の流れで操作をすれば、迷わずにWordPressが使用できるようになりますので、ぜひ参考にされてください。

公式ページはこちら↓

WordPressのインストール手順について

MySQLの有効化（利用開始）

WordPressではログイン情報や投稿情報、プラグインの情報など、様々なデータを保持する必要があるため、データベースを使用する必要があります。

MySQLとは

データを取り扱うデータベースシステムの一種で、大量のデータを効率よく保存し、管理し、検索できるシステムのことを指します。
簡単に言えば、MySQLは多くのデータを効率的に管理し、必要な情報をすばやく取り出すための便利なツールです。ウェブサイトのユーザーデータ、在庫管理システム、ブログの投稿管理など、さまざまな用途で使用されています。

有効化の手順

アプリケーション→データベースをクリックします。

MySQLの利用開始ボタンがあるので、クリックします。

利用開始ボタンをクリックすると、パスワードを設定する画面が表示されるので、画面に沿ってパスワードを登録します。

※非常に大事なものになるため、別のテキストやパスワードを管理している媒体に保存しておきましょう。

phpMyAdminの有効化

ウェブブラウザ上で動作するMySQLデータベース管理ツールです。

アプリケーション→データベースをクリックします。

phpMyAdminの有効化ボタンがあるので、クリックします。

画面中央の矢印のアイコンから管理画面を開くことができますが、使用しているPHPのバージョンによってはエラーが発生します。

管理画面のバージョンを確認し、5.2を選択します。以下の画面にて既に5.2になっていれば特に操作する必要はありません。

エラーが発生した場合

PHPのバージョンを確認します。確認しPHPのバージョンを8.1に変更します。

アプリケーション→基本アプリを選択

PHPの設定ボタンをクリック

バージョンの選択から8.1（CGI）をクリックして変更ボタンを押します。

これでPHPのバージョン変更が完了します。

変更が完了したら、再度phpMyAdminの開いてみましょう。

ログイン画面が表示されればOKです。

phpMyAdminにログインするには、Bizメール＆ウェブのコントロールパネルにログインした際のIDと、MySQLを有効化した際に作成したパスワードが必要になります。

WordPressのインストール

アプリケーション→追加アプリを選択、WordPressの行のインストールボタンをクリックしてインストールを行います。

/www/htdocs/の中に「wordpress」フォルダが作成されます。

既にフォルダが作成されている場合、していた場合は上書きされます。

インストールを実行します。の子画面が表示されるので、「はい」をクリックしてインストールを実行します。

インストールが完了したら「インストールが完了しました」と子画面が表示されます。

大事な内容のため、内容を保管しておきましょう！

画面から選択してコピーができるので、マウスで選択状態にして、ctrl（command） + cでコピー、テキストエディタやメモ帳などに、ctrl（command） + vで張り付けておきましょう。

ルートディレクトリについて

Bizメール＆ウェブではhtdocsの直下がルートディレクトリとなります。

ルートディレクトリとは、起点となるフォルダのことで、https://〇〇〇〇〇.jpといった形でホームページを開いた場合やhtdocsの中のindex.htmlが読み込まれます。

もしhtdocsの中にpublic_htmlのようなフォルダが存在し、その中にあるindex.htmlを開きたい場合は、https://〇〇〇〇〇.jp/public_htmlをURLとして呼び出します。

他社のレンタルサーバ（ホスティングサービス）では、上記のルートディレクトリを変更することが可能でしたが、Bizメール＆ウェブで変更する方法はわかりませんでした。
変更する方法はないのかもしれません。

ホームページを開くURLを変更（ドメイン名で表示させたい）

上記の流れでWordPressをインストールした場合、ホームページを開くためのURLがhttps://ドメイン名/wordpressとなってしまいます。

こちらを変更する方法を解説いたします。

ここからの作業はFTPソフトを使用することを前提に解説いたします。
　※ファイルのダウンロード作業が発生するため

FTPソフトとはサーバとのファイルのやり取り（アップロード・ダウンロード）を行うためのソフトです。
アップロードだけの場合、コントロールパネルの機能で事足りるのですが、ダウンロードができないため、FTPソフトが必要となります。
ダウンロードするのは、サーバ上のファイルを修正する必要があるためです。直接編集ができないので、一旦ダウンロードする必要があります。

手順１）WordPressの管理画面からパスを変更する

始めに管理画面からログインをして、設定画面を開くと、上記のようにパスが設定されています。

これを以下のように変更します。

サイトアドレスの/wordpressの文言を削除しました。

管理画面での作業は以上です。

手順２）ルートディレクトリは変更できないため、wordpress/index.phpを変更する

作成されたwordpressフォルダの中にindex.phpファイルがあります。wordpressはこちらのファイルが起点となります。

FTPソフトにて、index.phpを一旦自身のPCにダウンロードし、中身を開きます。

<?php

/**
 * Front to the WordPress application. This file doesn't do anything, but loads
 * wp-blog-header.php which does and tells WordPress to load the theme.
 *
 * @package WordPress
 */

/**
 * Tells WordPress to load the WordPress theme and output it.
 *
 * @var bool
 */
define('WP_USE_THEMES', true);

/** Loads the WordPress Environment and Template */
require __DIR__ . '/wp-blog-header.php';

一番下の行に、

require __DIR__ . '/wp-blog-header.php';

こちらを

require __DIR__ . '/wordpress/wp-blog-header.php';

と変更します。

変更したら、wordpressのフォルダではなく、一つ上の階層（htdocs）にアップロードしましょう。
ここにアップロードするのは、こちらのフォルダがルートフォルダになっているからです。
www/htdocsにindex.htmlが存在する場合は、一旦自身のPCにダウンロードしておきましょう。
※初期導入の場合は必要ないと思われますが・・・

これで、ドメイン名を指定するだけでWordPressサイトが開けるようになりました。

Bizメール＆ウェブ ビジネスではマルチドメインが使用できないため、コントロールパネルからWordPressをインストールすると、サブディレクトリとして、WordPressがインストールされるようです。

管理画面が正常に動かない！？

WordPressの管理画面からログインをしてAll-in-One WP Migrationなどのプラグインを使用し、自身で構築したWordPressサイトをアップロードしようとすると、プラグインの画面が正常に動作しない可能性があります。

私の場合は、エクスポートやインポートの画面は表示されるものの、クリックしても反応しない状態でした。

調査したところ、デフォルトで選択されているテーマが古く、アップデートされていないことが原因でした。

デフォルトがTwenty Twenty-Twoが選択されており、Twenty Twenty-Fourを有効化にすることで解消されました。

これでエラーが解消されAll-in-One WP Migrationも使用できるようになっていると思います。

さいごに

WordPressのインストールについて解説させていただきました。

簡単インストールがない分、若干時間は要しますが、同様にWordPressを使用することはできます。

少しでも参考になりましたら幸いです。

reCAPTCHAを設定した際に、トップに戻るボタンと被ったりして、位置を変更したいなと思われたことはないでしょうか。

今回はWordPressの管理画面からCSSやコードを修正して、reCAPTCHAマークの制御を行う方法をご紹介いたします。

reCAPTCHAマークを調整する方法

追加CSSでの修正

外観－カスタマイズー追加CSSより以下のコードを追加します。

.grecaptcha-badge {
	bottom: 100px !important;
}

!importantを付けているのは、.grecaptcha-badgeの要素に対して直接bottomプロパティが指定されているため、!importantで上書きしています。

reCAPTCHAマークを消す方法

reCAPTCHAマークを消す場合、サイト上にreCAPTCHAを使用している旨、記載する必要があります。

Google公式/よくある質問

以下のコードを追加CSSに記載することでマークを消すことが可能です。

.grecaptcha-badge { visibility: hidden; }

reCAPTCHAを使用していることを明示する

公式サイトでは以下のコードを追加するよう案内があります。

This site is protected by reCAPTCHA and the Google
    <a href="https://policies.google.com/privacy">Privacy Policy</a> and
    <a href="https://policies.google.com/terms">Terms of Service</a> apply.

上記をそのまま追加してもよいですが、デザインの調整を行います。

本サイトでは以下のようにコードを調整し、reCAPTCHAを使用していることを明示しております。
※本サイトではお問い合わせフォームの送信ボタンの下に追加しております。

<div class="recaptcha-text">
  <p>This site is protected by reCAPTCHA and the Google</p>
  <p>このサイトはreCAPTCHAとGoogleによって保護されており、Googleのプライバシーポリシーと利用規約が適用されます</p>
  <p><a href="https://policies.google.com/privacy">プライバシーポリシー</a> / <a href="https://policies.google.com/terms">利用規約</a></p>
</div>
<style>
  .recaptcha-text {
    font-size: .7em;
    margin-top: 2em;
  }
  .recaptcha-text p:last-child {
    margin-top: .5em;
  }
  .recaptcha-text p:last-child {
    margin-top: 1em;
  }
</style>

送信ボタンの下にテキストが追加されました。

さいごに

いかがでしたでしょうか。

CSSを調整することで場所の調整は可能なため、reCAPTCHAの表示位置でお困りでしたら本記事の内容をお試しください。

本記事が少しでも参考になりましたら幸いです。

WordPressでお問い合わせフォームを使用する際に、プラグインを使用することがほとんどかと思われますが、その中でも使用頻度の高いContact Form 7でのreCAPTCHAの設定方法について解説いたします。

reCAPTCHAについて

reCAPTCHAとは、Googleが無料で提供しているスパム対策サービスです。

以下のようなチェックを見たことはないでしょうか。

reCAPTCHAを導入することにより、bot（自動化プログラム）か人かを区別することができるため、スパムメール（迷惑メール）を回避することが可能です。

上記のチェックボックスはreCAPTCHA v2で導入した際に表示されておりました。

こちらを導入することによるデメリットとして、ユーザ側の操作が増えることにより、サイトからの離脱率が高くなることが挙げられます。

ですが、現行のreCAPTCHA v3（最新のバージョン）では自動で人かどうか判断してくれるようになっています。

reCAPTCHAの設定方法　～手順～

Google reCAPTCHAのページより、サイトキーとAPIキーを取得する

https://www.google.com/recaptcha/about/?authuser=3

v3管理コンソールを開きます。

ラベルはサイトの名前を入力します。（reCAPTCHAの管理画面に表示される名前なのでわかりやすい名前でOKです）

reCAPTCHAタイプはスコアベース（v3）になっていることを確認し、対象サイトのドメインを入力します。

ドメインの入力後、+ボタンを押して、送信ボタンを押します。

サイトキーとシークレットキーはWordPressの管理画面で使用するため、コピーで退避しておきます。

WordPressの管理画面より、設定を行う

WordPressの管理画面より、Contact Form 7 で追加したフォームのポップアップメニュー、インテグレーションを開きます。

インテグレーションのセットアップをクリックします。

こちらに先ほど取得したサイトキーとシークレットキーを入力し、変更を保存をクリックします。
※長いため、コピーアンドペーストが確実です

以上で、reCAPTCHAの設定は完了です。

Webサイト上に以下のようなマークが表示されていればreCAPTCHAが反映されている状態となります。

さいごに

Contact Form 7でのreCAPTCHAの設定方法について解説させていただきました。

Contact Form 7を入れるだけだとスパムメールを頻繁に受信する可能性があるため、サイト制作を請け負う際にはこの辺りも考慮して制作を行いたいですね。

reCAPTCHAの設定自体は簡単で、慣れるとそこまで時間を要さず対応ができます。

注意点として、Webサイトの右下にメニューが表示される兼ね合いで「トップに戻るボタン」と被る可能性があります。

こちらはCSSで調整が可能で以下の記事にてご紹介しております。

Webサイト制作に関するノウハウブ…

reCAPTCHAのマークの位置の調整 – 消す方法を解説 reCAPTCHAを設定した際に、トップに戻るボタンと被ったりして、位置を変更したいなと思われたことはないでしょうか。 今回はWordPressの管理画面からCSSやコードを修正して…

今回の記事が少しでも参考になりましたら幸いです。

こんにちは！IWACODEの岩村彰斗です。

今回はWebサイトを作成する上でとても大切なOGPについてご紹介させていただきます。

OGPとは？

OGPは（Open Graph Protocol）を略したもので、簡単に言えば、SNS（X、Facebook、LINEのトーク）でURLを張り付けた際に、表示される仕組みのことです。

LINEのトーク画面でサイトのURLを張り付けた際に、画像などが自動で表示されたりしたことはないでしょうか？

LINEでお店のURLを張り付けたときに勝手に画像が表示されたような・・・

筆者

このように設定していると、画像が表示されます。

SNSでいろんな方にシェアしてほしい、クリックしてほしい！といった方にはとても重要です！

OGPの指定方法について

WordPressプラグインを使用する場合

WordPressを使用している場合、プラグインで制御することも可能です。

もし何らかのWordPressテーマを使用している場合は、次のプラグインのうち１つ選んで使用すれば問題ありません。

プラグインで設定できるんですね！

筆者

注意することがあって、インストールするのは１つだけでよいです！
設定が重複して正しく表示されない可能性もあるので、複数入っていないか確認してみましょう。

コーディングで実装する場合

コーディングに関しては大体決まっているので、今回ご紹介するコードをコピペして、それぞれのページに合わせて名前や説明を変更すれば基本的には問題ありません。

<meta property="og:title" content="Webページのタイトルをここに記載">
<meta property="og:description" content="Webページの説明文をここに記載（～90文字程度）">
<meta property="og:type" content="website">
<meta property="og:image" content="表示する画像のURL">
<meta property="og:url" content="WebページのURL">
<meta property="og:site_name" content="Webサイトの名前">
<!-- X（Twitter） -->
<meta name="twitter:title" content="Webページのタイトルをここに記載">
<meta name="twitter:description" content="Webページの説明文をここに記載（～90文字程度）">
<meta name="twitter:image" content="表示する画像のURL">
<meta name="twitter:card" content="summary">

設定の詳細

X（旧Twitter）の設定（省略可）

注意点

表示されるカードの大きさによっては、設定している画像が自動的にトリミングされてしまいます。

OGPで推奨されている画像の大きさは横が1200px、縦が630px（比率1.91：1）となっています。

LINEのトーク画面などは上記の大きさで問題ありませんが、その他のSNSでシェアした場合、正方形のサイズにトリミングされます。

トリミングされると画像の文字切れなどが発生する可能性もあるため、サイズは横：1200px、縦：630pxで作成し、必要な情報は、中央の正方形部分に収めるようにするのがオススメです！

設定したOGPの確認をする方法

プラグイン、またはコーディングによってOGPの設定が完了した後、どのようになっているか、または正しく設定されているか確認する方法があります。

以下のサイト（シミュレーター）にてOGP設定を行ったサイトのURLを張り付けるだけで、確認が可能です。

ラッコツールズ

OGP確認：facebook、twitter、LINE、はてなのシェア時の画像・文章を表示 | ラッコツールズ🔧 URLを入力すると各SNS（facebook・twitter・はてなブックマーク・LINE）でページをシェアした際のOGP画像・タイトル・説明文を確認できるOGPデバッガー・シミュレーター。P…

設定が完了したら、一度確認してみるのをおススメします！

さいごに

いかがでしたでしょうか？

OGPの設定はWebサイトを制作する上で非常に重要なので、制作する際には忘れずに設定を入れるようにしましょう！

今回の記事が少しでも参考になりましたら幸いです。

WordPressでのセキュリティ対策は行われておりますか？

WordPressはシェアが最も多いCMSであるとともに、オープンソースであることからセキュリティに脆弱性があるなどの声をよく耳にします。

実際にホームページが乗っ取られたり、マルウェア（コンピュータウイルス）に感染したりといった事例もあります。

WordPressのサイトを運用する上で、セキュリティ対策を行っていないと、さまざまなトラブルが発生する可能性があります。

今回の記事では、最低限やっておきたいセキュリティ対策３選ということで解説させていただきます。

何もやっていないよ～、という方はぜひ本記事を読んだ後に実施されてみてください！

WordPressでのセキュリティ対策

１）予測しやすいIDやパスワードを避ける

WordPressは管理画面がインターネット上にあることから、ログインができれば管理者の情報は丸わかりになってしまい、不正ログインされてしまいます。

IDとパスワードは氏名や誕生日にしていたり、あるいはドメイン名と同じにしていたりすると、不正アクセスをされてしまう可能性がグッと上がってしまいます。

忘れないように誕生日やわかりやすいものに設定しがちですが、大事な情報の流出に繋がるため、IDとパスワードは予測しにくいものに変更しましょう。

２）ログインURLを変更する

WordPressサイトへのログインURLを変更しないと、ログインページにたどり着けてしまいます。

不正ログインbotなどによる攻撃を避けるためにも、ログインURLを変更するのはセキュリティ対策として必須となります。

URLを変更するのはプラグインで簡単に実装が可能なため、これからサイトを立ち上げる方、まだ対策を実施されていない方はご参考ください。

※以下のプラグインは無料でインストールが可能です。

SiteGuard WP Plugin

インストールすることにより簡単にURLを変更することが可能です。

また、画像認証機能も追加することができ、ひらがな認証やアルファベットでの認証など、よりセキュリティを強固にすることができます。

本プラグインは使用されているユーザ数がとても多いですが、SWELLなどの特定のワードプレステーマと相性が良くない場合もありますので、使用される場合は非推奨のプラグインなども確認されてみてください。

SWELL

推奨プラグインと非推奨・不要・注意すべきプラグインについて | WordPressテーマ SWELL WordPressテーマ「SWELL」ではどんなプラグインを使用すればいいのか、推奨されるもの・推奨されないもの・基本的に使わなくていいもの・使うなら気をつけて欲しいもの に…

公式サイトはこちらから

XO Security

こちらのプラグインも同様にURLを変更することが可能です。

同様に画像認証機能の追加も可能です。

プラグインは英語で表記されているものが多いですが、こちらのプラグインは日本語に対応しており、大変扱いやすくなっております。

公式サイトはこちらから

３）WordPress、プラグインを状態を最新にする

WordPressはオープンソースであることから、ソースコードが公開されております。

プラグインも同様で、ソースコードが公開されており、プログラムの脆弱性を狙った攻撃を受ける可能性があるため、プログラムを最新の状態にしておく必要があります。

ただ、プログラムを更新することによりWebサイトの不具合が発生する可能性も考えられるため、実施前にはバックアップを取得しておくことを推奨いたします。

さいごに

今回はWordPressのセキュリティについて簡単にですが解説いたしました。

特に対策を実施していない方は、URLの変更だけでもやっておくのが良いかと思います。

万が一、ホームページの乗っ取りなどになった場合は、バックアップから復旧するなど元の状態に戻すのが大変になったりし、運が悪ければ普及ができない状況にもなりかねません。

最悪な状態にならないためにも、できる限りの対策はあらかじめやっておきましょう！

ホームページ制作を検討される中で、どうやってホームページを制作しよう…とお悩みの方もいらっしゃるかと思います。

ホームページの制作はWordPressで制作するのがオススメです！

本記事では、WordPressとはどのようなものなのか、そしてオススメな理由について解説させていただきます。

WordPressとは

WordPress（ワードプレス）とはホームページなどのWebサイトを制作するシステムの一種でCMSとも呼ばれております。

Ｃ：コンテンツ（contents）
Ｍ：マネジメント（management）
Ｓ：システム（system）

CMSとは、簡単にいうとWebサイトの専門的な知識や技術がなくとも、ホームページの制作や更新ができるシステムのことを指します。

「テーマ：外観」といってホームページの見た目を変えることもできますし、お知らせ欄やブログ等、ユーザ側で情報を更新していけるもの魅力の一つとして挙げられます。

HTMLやCSSといったコンピュータ言語を記述できなくても、ノーコードで構築することが可能です。

HTMLやCSSがわからない！HTMLやCSSってどんなものだろうと興味がございましたら、下記記事にてご紹介しております。ご参考になれば幸いです。

WordPressがオススメな理由

テンプレートが豊富なこと

WordPressはテーマといって外観を変更することができるテンプレートが多数備わっております。

無料テーマ、有料テーマがありますが、無料テーマでも十分きれいなサイトを制作することが可能です。

サイトの目的や好みのデザインをテーマによって選定できるものWordPressの強みの一つだと思います。

プラグイン（拡張機能）が豊富なこと

WordPressにはプラグイン（拡張機能）と呼ばれる機能が多数備わっております。

テーマと似ていると思われる方もいらっしゃると思いますが、テーマはあくまでも外観であり、プラグインは追加機能のような意味合いとなります。

プラグインによって、セキュリティの制度をあげたり、バックアップを取得したり、お問い合わせページを簡単に作成したりといったことも可能となります。

但し、プラグインを導入しすぎるとサイトの容量が重たくなってしまい、レスポンスの低下に繋がりかねないので、プラグインの導入は必要最低限に絞ることも必要になってきます。

お知らせやブログの投稿など、自身で更新ができること

企業のホームページなどを見た際に、「新着情報」や「お知らせ」などの欄をお見かけしたことはありませんか？

そういった情報を掲載していく機能が、WordPressには備わっております。

HTMLやCSSといったWeb制作で使用するコンピュータ言語を使用せずとも、画面の操作のみで情報発信が可能となります。

無料で使用できること

基本的に無料で利用することができます。

有料テーマを利用する場合はテーマ代として費用が発生します。費用はテーマによってさまざまですが、安いものは1万円以内で使用でき、高額なものは2万円を超えるものあります。

一部ですが、プラグインにも有料のものもあります。

無料テーマでも十分高機能なものがそろっており、基本的には無料で扱るのも大変良いところですね！

WordPressは無料で利用が可能ですが、WordPressとは別にレンタルサーバ代とドメイン利用費用は発生します。

サーバは月々1000円以下、ドメインは年間で1000円ほどとなります。

※詳細な金額などにつきましては各レンタルサーバ会社などをご確認ください。

Webサイトを運営するにあたって、サーバ代とドメイン代は必須となってきます！

カスタマイズが自由にできる

HTMLやCSS、プログラミングといった専門的な知識が必要となりますが、テーマを使用した場合にもレイアウトを変更することが可能です。

テーマを使用せずに、１からオリジナルなデザインでWordPressサイトを構築するのも可能です。

デメリットはあるのか？

WordPressのデメリットとしては以下の点が挙げられます。

デメリットはありますが、必要以上にプラグインを入れないことで、そこまで速度が遅くなることはありませんし、セキュリティについてはプラグインなどで対処することが可能です。

構築するための操作方法については、利用者が多いことからネット上に様々な情報が掲載されているため、悩みを解決することができると考えられます。

さいごに

WordPressはテーマを使用することによって、かなり短時間でWebサイトを制作することも可能となります。

ホームページ制作をご検討されている方は、ぜひ一度WordPressを使用して制作をご検討されてみてください！