1年ぶりにホームページの制作を請け負い,楽しくマークアップとJSを用いたコーディングが終了し、先方も見た目には大満足。
順調に進んでいるかと思いきや、WordPress化しようとしたら想像以上に忘れていることが多く手間取ってしまいました。
そこで次のホームページ制作を請け負うのは何年後になるかわかりませんが、1連の流れをドキュメントとして残しておこうと思います。
※こんなことをやるな〜という程度の記事です。初学者には説明が足りなさすぎるし、基礎を網羅している人には浅すぎる話なので完全に忘れかけてる人が対象ですね笑
MAPMの起動
こいつを使ってまずはローカルでワードプレス環境を作ります。
データベースの作成
WorPressをインストールする際にデータベースのユーザー名などを問われるのでphpMyAdminにアクセスしDBを作成。そしてユーザーアカウントのも自分は作ります。
WordPressのインストール
インストールする場所はここ！
Applicaion/MAMP/htdocs
ワードプレス化
index.htmlを3つのファイルに分ける
index.html
↓
index.php
header.php
footer.php
style.cssの追加
index.phpと同じ階層にテーマの詳細を記入したcssファイルの追加
/*
Theme Name: テーマの名前
Theme URL: URL
Description: ディスクリプション
Version: 1.0
Author: 著者
Author URI: 著者のプロフURL
*/
固定ページの作成
page-スラッグ.phpにファイル名&拡張性変更
管理画面からテンプレートを選択できるように名前の設定をファイルの先頭に入れる
<?php
/*
Template Name: page-company
*/
?>
インストールしたプラグイン
投稿複製
「Yoast Duplicate Post」
ワンクリックで投稿を複製できるのは最高です！！
お問い合わせ
「contact form 7」
問い合わせ作成と言ったらこれです！お馴染みのやつですね！
もろもろ設定が終わったらエディタにこのように貼り付けでソースの実装は完了！
楽すぎますね！！
<?php
echo do_shortcode('[WordPressが生成した任意の値が入ります]');
?>
SEO対策用
「All In One SEO Pack」
久しぶりに見るとかなり変わっていてどれか見つけられませんでした笑
その他ちょっとした設定
OGP設定
OGP設定はざっくり3つの設定方法があります。
- HTML（herder.php）のタグないに直書き
- function.phpに記述
- プラグインで設定
自分は応用が効く（投稿に画像があるかやサムネイルがあるか等の条件分岐ができる）のでfunction.phpのテンプレをコピペで設定してます。
--追記
AllInSEOの設定の幅が広がっていたのでfunctions.phpの設定はせずにプラグインで対応
その他
ここからはワードプレスとか全く関係ないかもしれませんがサイト向上につながりそうなこと載せておきます。
動画の圧縮
今回はファーストビューに動画を載せるのですがまさかの36MB笑笑
音声なしのリピート映像は3MB前後に収めたいところですね！！
オンラインの動画圧縮ツールを使っても20MBまでにしか圧縮できなかったので専用の「HandBrake」というアプリインストールして圧縮しました。
SEO対策
h1タグについて
TOPページではlogoにh1タグを使用しています。
→TOPのみimgタグのalt属性を読み取ってもらえるため。
しかし、下層ページではlogoにh1タグを使うのはNGとされているのでheaderの使い分けが必要ですね！
haderをtop用とそれ以外で分けるのは修正するときの工数が増えるので1つのheaderファイル内で条件によって表示分けをします。
<?php if ( is_home() || is_front_page() ) : ?>
ここにトップページにだけ表示したいHTMLを記載
<?php else : ?>
ここにトップページ意外に表示したいHTMLを記載
<?php endif; ?>
OGP設定
上記に記載したとおり
全画像の圧縮
これは必須ですね！
タグの設定
- sectionタグ h2タグの設置
- altの設定
グーグルサーチコンソールの設定
こちらより設定