ログアウト

ブログの設置方法

すでに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月~)
※以前のテンプレートは下記
G:\共有ドライブ\素材\コーディングテンプレート\ブログテンプレート
ファイル名:blog_bk211109

①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>部分を差し替える形でペーストします。

↓この部分を切り取って、</head><body>と差し替える

h1の編集について

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

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

同様に、フッター部分も編集
first – Copy.htmlのfooter部分を、footer.phpにコピーします。

更新が多いパーツや重いパーツ(診療時間表やGoogleマップなど)は、更新時に抜け漏れが生じやすい部分でもありますので、要望が無ければ抜いてしまってもOKです。
最低限、コピーライトと各種jsのスクリプトタグのみコピペしてください。

→基本的には他のページと同様のパーツを入れ込んでください。特に診療時間、問い合わせ先(住所・電話)などはクリニックの要です。抜かないでください。

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

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

cssの編集

ブログ用のstyle.css(clinic_blogフォルダ内にあるstyle.css)を編集します。
ボタンなどの色を、本サイトに合ったものに一括変換します。
テンプレートファイルの冒頭にガイドがあるので、参考にしてください。

※『fontawesomeのアイコンの色』は、他のページのパンくずリストのアイコンの色にしてください。

ぴんとこなければ、一度サーバーにアップしてブラウザで表示してみてから編集してもOKです。
色以外の部分も案件によって崩れている場合がありますので、一度表示してみてから微調整してください。

上記の色と表示崩れ以外のスタイルは、指定がなければ特に変更不要です。
タイトル部分(h2~h5くらいまで)についても、本サイトと同じデザインがあたるように調整してください。

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

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

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

WordPressの各種設定

WordPress管理画面での設定

表示設定

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

一般設定

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

お客様アカウントの追加

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

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

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

プラグイン

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

Really Simple SSL

有効化すると、ダッシュボードの上部に「SSLに移行する準備がほぼ完了しました」というアテンションが出ます。
「はい、SSLを有効化します」をクリックしてください。
その後、設定 > SSLの横に数字が表示されていれば、未確認の通知があります。設定画面を開いて通知を消してください。

Yoast SEO

タイトルやディスクリプションはこちらのプラグインで設定します。

サイドメニュー Yoast SEO >検索での見え方>「一般」タブ

  • タイトルを書き換える…有効
  • タイトル区切り…本サイトのタイトルを参照して、タイトル区切りの記号を選択
  • ホームページ…「SEOタイトル」と「メタディスクリプション」欄に、ブログのトップページのタイトルとディスクリプションを入力。デフォルトでは変数で入れてますが、直書きでもOKです。変数は下記の値が挿入されます。
    • 「サイトタイトル」…設定 > 一般 > 「サイトのタイトル」に入力している文字
    • 「区切り」…先ほど設定した「タイトル区切り」
    • 「キャッチフレーズ」…設定 > 一般 > 「キャッチフレーズ」に入力している文字
  • それ以外の欄はデフォルトのままでOK。

同 検索での見え方>「コンテンツタイプ」タグ

  • 投稿…「投稿を検索結果に表示しますか?」「投稿のSEO設定を表示」はいずれもオン。(前者はインデックスするかどうか、後者は投稿編集画面で個別にタイトル等を編集できるようにするかという意味です。)
    SEOタイトルについては、記事タイトル部分(Title)部分は変数のまま変更せず、それ以降は本サイトと合致するように変更してください。
    ディスクリプションは変更不要。(『抜粋』(Excerpt)=本文から抜粋して自動生成されます。)
  • 固定ページ…変更不要(固定ページを使用する場合は適宜編集)

検索での見え方>「タクソノミー」タグ

  • カテゴリー…「カテゴリーを検索結果に表示しますか ?」および「カテゴリー の SEO 設定を表示」は両方ともオン。
    SEOタイトルについては、カテゴリー名部分(Tterm title)部分は変数のまま変更せず、それ以降は本サイトと合致するように変更してください。
    ディスクリプションは、『Term title 記事一覧。』の後ろ部分を編集してください。指定がなければ、本サイトのディスクリプションからコピペでOKです。
  • タグ、フォーマットなど…変更不要

サイトマップの登録

Yoast SEOの機能で、記事を投稿すると自動で更新されるサイトマップが生成されています。
サーチコンソールを開き、サイトマップの送信画面で、「sitemap_index.xml」を送信してください。

【補足】
サイドメニューのYoast SEO > 一般 > 機能 > XMLサイトマップの文字の横の「?」をクリック
>「XMLサイトマップを表示。」をクリックすると、サイトマップが開きます。
このページのURLをサーチコンソールで送信する形です。
(ページ内に記載されているサイトマップのURLを一つ一つ登録する必要はありません。このページ自体のURL(sitemap_index.xml)を送信すれば、ページ内に記載されているすべてのサイトマップが読み込まれます。)

テスト投稿して自己検品

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