ログアウト

ブログの設置方法

Wordpress投稿日:

すでにWordpressが入っている場合

CMS案件の場合は、既存のWordpressに追加します。
基本的には、メニュー上で非表示にしてあるだけで、ブログ自体は用意されていますが、案件によっては一からカスタム投稿を追加する必要があります。

確認手順

Menu Editor（プラグイン）を確認

Menu Editorというプラグインが入っている場合は、このプラグインの設定を確認します。

1. 設定 ＞ Menu Editor

2.『ブログ』（『医療コラム』という名称の場合もあります）の横に点線の四角がついていたら、このプラグインによって非表示になっています。
上部にある点線四角のアイコンをクリックすると消えますので、この状態で変更を保存（右側の『Save Changes』ボタンをクリック）します。

function.phpを確認

Menu Editorが入っていない、または上記手順を行っても表示されない場合は、function.phpを確認し、remove_menu_page( 'edit.php' );という記述があれば、コメントアウトしてください。

CPT-UIでカスタム投稿を追加

プラグインで非表示になっておらず、function.phpにも非表示にする記述がない場合、ブログ（デフォルトの投稿タイプ）を、別の名称ですでに使用しています。
この場合、新たにカスタム投稿を追加する必要があります。

CPT UI ＞新規投稿タイプを追加タブに、必要事項を入力します。

  • 投稿タイプスラッグ…blog
  • 複数形のラベル…ブログ
  • 単数形のラベル…ブログ
  • 追加ラベル欄…すべて空白のままでOK
  • 設定欄…画像参照

ブログトップページが表示されない場合

https://ドメイン/blog にアクセスして、上手く表示されない場合は、投稿記事のアーカイブページを作成する必要があります。

  1. 固定ページに新規ページを追加（ページタイトルは「ブログ」、スラッグは「blog」）
  2. 設定＞表示設定＞ホームページの表示の「投稿ページ」に、先ほど作成したブログページを指定

WordPressのインストール

※Wordpressがすでに入っている場合は、上記『すでにWordpressが入っている場合』を参照。

①エックスサーバーにログイン

https://www.xserver.ne.jp/login_info.php
ID・パスワードはKintoneで確認してください。

②該当のサーバー番号の「サーバー管理」を開き、「Wordpress簡単インストール」を開く

③該当のドメインを選択する

④Wordpressインストールタブをクリック

下記を入力し、確認画面へ進むをクリックし、インストールを完了させてください。
インストールが完了したら画面を閉じずに、⑤のパスワード登録に進んでください。

サイトURL 「blog」でインストールしてください。
ブログ名 院名を入れてください。
ユーザー名 starterと入力してください。（社内アカウント名）
パスワード 英数字のランダムパスワードを入力してください。
メールアドレス wp-admin@hero-customer.com または wordpress@hero-customer.com を入力してください。
キャッシュ自動削除・データベース デフォルトのまま、ON、自動でデータベースを作成するにしてください。

⑤インストール情報をKintoneに控える

URL、各種アイパス、データベース名などをKintoneに残します。
顧客パスワードから新たにパスワードを登録してください。

テンプレートをインポートする

※YoastSEO導入に伴い、All-in-One WP Migrationでのインポートに変更しました。（2021.11月～）
※何らかの理由で、Migrationを使用できない場合は下記
G:\共有ドライブ\素材\コーディングテンプレート\ブログテンプレート\blog（Migrationを使わない場合）

①All-in-One WP Migrationをインストール＆有効化

②テンプレートファイルをインポート

サイドメニューのAll-in-One WP Migration＞インポートを開き、下記テンプレートファイルをドラッグ＆ドロップしてインポートします。

▼テンプレートファイルの場所
G:\共有ドライブ\素材\コーディングテンプレート\ブログテンプレート
ファイル名：blogtemplate.wpress

③アイパスの変更

インポートが完了すると、再度ログインを求められます。
ログイン用のアイパスも、インポートファイルによって上書きされています。
上記テンプレートフォルダにある『ブログテンプレートログイン情報.txt』でログインします。
その後、ユーザー＞ユーザー一覧から、アイパスを最初（WordPressインストール時）に設定したものに戻します。

※わからなければ告知サイト制作のマニュアルも参考にしてみてください。
（インポートするファイルは告知サイトとブログで異なりますのでそこだけ注意してください。）

テンプレートを編集する

phpファイルの編集

本サーバーのblogディレクトリにデータができているので、必要なファイルをダウンロードして編集します。

編集するファイル
・header.php
・footer.php
・style.css（clinic_blogフォルダ内にあるstyle.css）
・案件によっては、index.php、single.php も編集要
（主にパンくずリスト部分だけだと思います。本サイトと同じになっていれば編集不要）

手順
本サイトの適当なページをコピーしてベースにします。（今回はfirst.htmlをコピーしました）

コピーしたfirst – Copy.htmlをテンプレートから切り離し、hrefやsrcの値をブログ用に一括置換します。

置換する文字列（正規表現にチェックを入れてください）
※ここをミスすると、href="/tel:000～"やhref="/https://～"のように、不要な個所にスラッシュが入ってリンク切れが起こりますので注意してください。
（自己検品時にScreaming Frog SEO Spiderなどでリンク切れチェックを行ってください。）

置換前の文字列 置換後の文字列
href="(?!/|http|tel|javascript) href="/
src="js/ src="/js/
src="images/ src="/images/

置換できたら、first – Copy.htmlのヘッダー部分を、header.phpにコピペします。

案件によって多少違いますが、だいたい下記画像のあたり。
CSSなどlinkで始まる部分＋script関係（アナリティクスのコードを含む）＋ナビメニュー（PC・sp）＋メインビジュアルです。
metaタグやパンくずは不要。

header.phpのあとにindex.phpが読み込まれますので、どこまでかわからなければ、index.phpの最初がどうなっているか見てみて、タグや要素が重複しないようにしてください。

コピーしたものを、header.phpの最後にペーストします。
ブログ用のCSSを、全ページ共通のCSSより優先したい場合は、ブログ用CSSを後に読み込むように場所を移動してください。

また、このままだとheadの閉じタグやbodyの開始タグが重複してしまっているので、下記画像の部分を切り取り、コピペしてきたコードの中の</head><body>部分を差し替える形でペーストします。

h1の編集について

  • h1をページ上部にテキスト化している案件（2020年後半～の案件）：表示分岐が必要になるので、ブログテンプレートフォルダにある「h1の表示分岐.txt」をコピペして入れてください。
    デフォルトでは、『ページタイトル｜サイトのタイトル｜キャッチフレーズ』が入ります。
    サイトのタイトルとキャッチフレーズは、設定 ＞ 一般 の画面で入力した内容が入ります。
  • h1がロゴなどになっている案件（2020年前半以前の案件）：適宜調整してください。

Googleアナリティクスのタグ
header.phpに必ず入れてください。

同様に、フッター部分も編集
first – Copy.htmlのfooter部分を、footer.phpにコピーします。
基本的には他のページと同様のパーツを入れ込んでください。特に診療時間、問い合わせ先（住所・電話）などはクリニックの要です。抜かないでください。

header.phpにmainタグがある場合は、閉じタグ/mainをfooter.phpの最初に入れてください。

ここまで終わったら、ベースにしたファイル（上の例ではfirst – Copy.html）はもう不要なので削除してください。

cssの編集

ブログ用のstyle.css（clinic_blogフォルダ内にあるstyle.css）を編集します。
ボタンなどの色を、本サイトに合ったものに変更します。
テンプレートファイルの冒頭にガイドがあるので、参考にしてください。
※2022.10.11～変数での設定に変更しましたので、下記画像部分のみ変更してください。
（ファイル全体を一括変換する必要はありません。）

※『fontawesomeのアイコンの色』は、他のページのパンくずリストのアイコンの色にしてください。
ぴんとこなければ、一度サーバーにアップしてブラウザで表示してみてから編集してもOKです。
色以外の部分も案件によって崩れている場合がありますので、一度表示してみてから微調整してください。

タイトル部分（h2～h5くらいまで）についても、本サイトと同じデザインがあたるように調整してください。

  1. 本サイトのstyle.cssから、タイトルのデザイン部分をコピー（h2.tit01など、各タグごとに1種類だけでOK）
  2. ブログのstyle.cssに下記画像のように.cmn_editor内でのみ効くように入力
    ※お客様がクラシックエディターで見出しを選択することを想定し、セレクタにIDやクラス名は使用不可。
  3. h2～h4かh5くらいまで、同様に1種類ずつ入力
  4. sp用も同様に、本サイトのsp.cssからコピー
  5. ブログのstyle.cssの最後の方（sp用の記述部分）に入力

サーバーにアップロードする

上記で編集したheader.php、footer.php、sytle.css等のファイルをアップします。

WordPressの各種設定

WordPress管理画面での設定

表示設定

設定 > 表示設定で「検索エンジンがサイトをインデックスしないようにする」にチェックが入っていないかを念のため確認する。
※まだ公開してはいけない案件の場合は、逆にチェックを入れておいてください。
（チェックが入る＝noindexになります）

一般設定

設定 > 一般で下記を入力してください。
サイト名：ブログ（またはクリニック名。メタタイトルに合わせて調整）
キャッチフレーズ：メタタイトルでページ名の後に入れたい文章（「〇〇駅の〇〇クリニック」など）

また、『WordPress アドレス (URL)』と、『サイトアドレス (URL)』が「http」から始まっている場合は、「https」に変更してください。（https部分以外は変えないように注意。特に『WordPress アドレス (URL)』の方は、管理画面にアクセスできなくなります）

お客様アカウントの追加

設定 > ユーザー > 新規追加でお客様用のアカウントを追加します。

ユーザー名 ドメイン名などの英数字
パスワード 英数字のランダムパスワードを入力してください。
メールアドレス wp-admin@hero-customer.com または wordpress@hero-customer.com
※お客様のメールアドレスは絶対に使用しないでください。通知がいかないようにするためです。
新規ユーザーにアカウントに関するメールを送信 チェックを外してください。
権限グループ 「編集者」にしてください。

※お客様のアカウントを発行したら、顧客パスワードから新たにパスワードを登録してください。

プラグイン

全てのプラグインを有効化＆すべて更新します。
その後、下記の各種設定を行ってください。
※更新しないとボタンが押せない等のバグが出ることがあります。必ず更新まで行ってください。

Really Simple SSL

サイドメニュー「設定」＞「SSL」を開き、「SSL はサイト上で有効化済みです。」と表示されていることを確認してください。

Yoast SEO

タイトルやディスクリプションはこちらのプラグインで設定します。
※シスプレやシスオリなど、既存のWordpressにブログを追加した場合は、基本的にheader.phpで自動出力されるようになっています。その場合は、YoastSEOは不要です。

サイドメニュー Yoast SEO ＞「設定」＞「一般」＞「サイトの特徴」

  • 「XMLサイトマップ」以外、全部不要なので、機能を無効化します。
    各カード下部の「機能を有効にする」のトグルボタンをオフにしてください。
  • 「XMLサイトマップ」はオンにしてください。

同＞「サイトの基本」

  • サイト名、サイトの別名、キャッチフレーズ…必要に応じて編集
    （基本変更しなくて問題ないかと思います）
  • タイトル区切り…本サイトのタイトルを参照して、タイトル区切りの記号を選択
  • タイトルを強制的に書き換える…トグルボタンをオンにする

同＞「コンテンツタイプ」＞「ホームページ」

  • SEOタイトル…ブログのトップページのタイトルを入力。デフォルトでは変数で入れてますが、直書きでもOK。
  • メタディスクリプション…ブログのトップページのディスクリプションを入力。デフォルトでは変数で入れてますが、直書きでもOK。
    • 変数について
      • 「サイトタイトル」…Yoast SEO＞設定 ＞ 一般 ＞ 「サイトの基本」の「サイト名」部分が入ります。
      • 「区切り」…同「タイトル区切り」で選択した区切りの記号が入ります。
      • 「キャッチフレーズ」…同「キャッチフレーズ」部分が入ります。
  • その他は設定不要

同＞「投稿」

  • 投稿結果に 投稿 を表示…必ずオンにしてください。オフにしていると記事がインデックスされなくなります。
  • SEOタイトル・メタディスクリプション…ブログの投稿記事ページのタイトルとディスリプションです。記事タイトル部分は変数「タイトル」を使用し、それ以降は本サイトと合致するように変更してください。
    ディスクリプションは変数「タイトル」のあとに、変数「抜粋」を使用してください。本文から抜粋して自動生成されます。
  • その他は設定不要

同＞「固定ページ」

  • ブログ単体の場合は、固定ページは存在しないはずなので、設定不要です。

同＞「カテゴリーとタグ」＞「カテゴリー」

  • 検索結果に カテゴリー を表示…オンにしてください。（カテゴリーページのインデックスが不要であればオフ）
  • SEOタイトル・メタディスクリプション…カテゴリーごとの一覧ページのタイトルとディスリプションです。変数「ターム名」を入れると、当該ページのカテゴリー名が入ります。それ以降は本サイトと合致するように変更してください。
  • その他は設定不要

同＞「カテゴリーとタグ」＞「タグ」

  • 検索結果に タグ を表示…オフにしてください。
  • その他は設定不要
    ※タグ自体、基本的に使用しないため。使用する場合は適宜設定してください。

同＞「高度な設定」＞「投稿者アーカイブ」

  • Enable 投稿者アーカイブ…オフにしてください。

同＞「高度な設定」＞「日付アーカイブ」

  • Enable 日付アーカイブ…オフにしてください。

サイドメニュー Yoast SEO ＞「連携」

  • 全部不要なので、無効化します。
    各カード下部の「統合を有効にする」のトグルボタンをオフにしてください。

お客様の管理画面でYoast SEOを非表示

  1. サイドメニュー 「設定」 ＞「Menu Editor」
  2. 「Yoast SEO」（「Yoast SEO 00件の通知」）を選択
  3. 上部の右から三番目のアイコン（マウスを乗せると「Delete Menu」と表示されるアイコン）をクリック
  4. 警告画面がポップアップ表示されるので、「Hide it from everyone except Administrator」を選択
    ※少し乱暴なやり方ですがこれが一番簡単です。
  5. 「Save Changes」をクリックして保存

サイトマップの登録

Yoast SEOを使用している場合

※サイトマップのためだけにYoast SEOをインストールする必要はありません。

Yoast SEOの機能で、記事を投稿すると自動で更新されるサイトマップが生成されています。
サーチコンソールを開き、サイトマップの送信画面で、「sitemap_index.xml」を送信してください。
※正確なパスは、サイドメニュー Yoast SEO ＞「設定」＞「一般」＞「サイトの特徴」＞「XML サイトマップ」のカード内にある「SML サイトマップを表示」ボタンをクリックして開いたページのURLになります。

ページ内に記載されているサイトマップのURLを一つ一つ登録する必要はありません。このページ自体のURL（sitemap_index.xml）を送信すれば、ページ内に記載されているすべてのサイトマップが読み込まれます。

2023.1月ごろから、投稿記事がない場合、サイトマップ自体が生成されない仕様になりました。
差しさわりのない投稿を1件行い、（「ブログ準備中。随時更新してまいります」のような記事）サイトマップを送信してください。

Yoast SEOを使用していない場合

最近のシスプレやシスオリの場合は、「XML Sitemap & Google News」というサイトマップ生成のプラグインが入っています。https://ドメイン/sitemap.xmlにアクセスしてみて、ブログページが含まれていれば作業不要です。

古い案件で、サイト全体がWordpressで作られているにも関わらず、静的サイトマップ（Wordpressのプラグインで自動生成されたサイトマップではなく、手動で更新が必要なサイトマップ）を利用している場合は、これを機に「XML Sitemap & Google News」で生成されたサイトマップに差し替えてください。（FTPでルートディレクトリにあるsitemap.xmlを削除してから、プラグインをインストールしてください）
設定方法は下記参考サイト参照。

参考サイト：XML Sitemap & Google Newsの設定方法・使い方【サーチコンソール】 | マニュオン

※参考サイトでは、3つのサイトマップURLを送信するように記載されていますが、sitemap.xmlだけで大丈夫です。

テスト投稿して自己検品

  • チェック項目は、ブログ検品用チェックシートを参照
  • 最後にテスト投稿やテスト用カテゴリーを削除
  • 記事を残す場合は、第三者に見られても問題がない記事を1件投稿（Yoast SEOを使用している場合や、サイトのトップページに最新記事を表示する場合など）
    • 例）
      タイトル：ブログをはじめました
      本文：ブログをはじめました。随時更新して参りますので、どうぞよろしくお願いいたします。
  • トップページにブログの最新記事を掲載する場合
    『G:\共有ドライブ\素材\コーディングテンプレート\ブログテンプレート』内にある、「新着記事をTOPに表示させる方法.txt」参照