ログアウト

ブログの設置方法

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です。
色以外の部分も案件によって崩れている場合がありますので、一度表示してみてから微調整してください。

上記の色と表示崩れ以外のスタイルは、指定がなければ特に変更不要です。

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

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

WordPressの各種設定

WordPress管理画面での設定

表示設定

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

一般設定

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

お客様アカウントの追加

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

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

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

プラグイン

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

Really Simple SSL

有効化すると、ダッシュボードの上部に「SSLに移行する準備がほぼ完了しました」というアテンションが出ます。
「はい、SSLを有効化します」をクリックしてください。

Yoast SEO

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

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

  • タイトルを書き換える…有効
  • タイトル区切り…本サイトのタイトルを参照して、タイトル区切りの記号を選択
  • ホームページ…ブログのトップページのタイトルとディスクリプションを入力。デフォルトでは変数で入れてますが、直書きでもOKです。
  • それ以外の欄はデフォルトのままでOK。

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

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

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

  • カテゴリー…表示は両方ともオン。
    SEOタイトルについては、カテゴリー名部分(Tterm title)部分は変数のまま変更しない方がいいと思いますが、それ以降は適宜変更してもかまいません。
    ディスクリプションは、『Term title 記事一覧。』の後ろ部分(下記画像の青い蛍光ペン部分)を編集してください。指定がなければ、本サイトのディスクリプションからコピペでOKです。
  • タグ、フォーマットなど…変更不要

サイトマップの登録

サイドメニューのSEO>一般>機能>XMLサイトマップの文字の横の「?」をクリック
>「XMLサイトマップを表示」をクリックすると、サイトマップが開きます。
このURLをサーチコンソールに登録してください。

テスト投稿して自己検品

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