WordPressでHPをリニューアル
今更ながらですが、HPをWordPressでリニューアルしました。
事の起こりは、2年ほど前に行ったHPのSSL化。
SSL化直後は
あまりわからなかった物の、しばらくするとGoogleで一向に検索に引っかかってこない。
というよりも、なかった物にされていたのでhtmlを捨てて、一気にWordPressへと一新しました
他のサイトの面倒も幾つか見ているので、WordPress自体は触ったことがあった物の、全てお膳立てされたサイトのメンテナンスを担当していたため、WordPress本体のセットアップ、テーマ＆プラグインのインストールは初めてのことで、結構手間取りました。
都合、WordPressのインストールし直しが5回、MySQLの入れ直しが4回。やっと安定しました。
最終的に、元々のWEBサイトを全てWordPressに移行完了するまで、一週間かかってしまいました。
そこで、自身の備忘録を兼ねて、これからWordPressをお考えの方に纏めておきます。
現在の構成として、
- Lolipop
- WordPress
- Lightning
- Lighting-Child
- VK All in One Expansion Unit
- VK Blocks
- Contact Form 7
- Table of Contents Plus
- Easy FancyBox
- Google XML Sitemaps
以上です。
WordPress・MySQLは
Lolipopの サイト作成ツール→WordPress簡単インストール
その後は、
Lightning-Childのみ
https://lightning.nagoya/ja/setting/customize/child_theme
よりダウンロードしていますが、
その他は
「外観→テーマ→新規追加」よりLightning
「プラグイン→新規作成」より VK All in One Expansion Unit VK BlocksContact Form 7 Table of Contents PlusEasy FancyBox Google XML Sitemaps
指示に従えば簡単に、セットアップができます。
絶対にやるべきこと
Lolipopにて
- SSLの設定 wwwありなしのページを統合するために重要
セキュリティー → 独自SSL証明書導入
sample.com www.sample.com 両方ともSSL保護有効
サーバーの管理・設定 → 独自ドメイン設定
ドメイン htt://sample.com 公開フォルダ sample
WordPressにて
- SSLの設定 サイトの安全性を高めるために必ず設定
設定 → 一般
項目「WordPressアドレス」「サイトアドレス」 htttp:// → https:// に変更
最初の段階で設定しないと、 後々問題解決が非常に面倒
絶対やってはいけないこと
WordPressにて
- 設定 → 一般
項目「WordPressアドレス」
WordPressって、htpps://sample.com/sample に入ってるんじゃね?
と変更してしまうと、samle.com/wp-admin にログインできなくなってしまいます。
設定/一般部分のアドレスは ”https://”に変更するのみ
それ以外は変更しないこと
Lolipopにて
データベースのパスワードを変更しないこと
これらすべて準備したうえで、コンテンツの作成を行えば、その後の処理はスムースに行えます。
設定に間違えがあると、wp-cinfig.phpの変更など、相当あちこちをいじくりまわすことになります。
WordPressの再インストールが必要となる事態にも陥り、最悪これまで作成したコンテンツがすべてなくなります。
上記の準備さえしっかりと整えておけば、後は習うより慣れろ。
スムースにサイトの作成が行え、SEO対策も完了です。
ここまで準備が出れば、事前にダウンロードしていたLightning_child_sampleフォルダーをFTPアップローダーを使ってsample/wp-content/themes 内にアップロードします。
cssはこの時点では変更せずにそのままアップロードしてOKです。
外観 → テーマ からlightning-child-sample を有効化します。
外観 → テーマエディター でlingtning-child-samle のcssの変更を行います。この方法が一番簡単です。
因みにこのサイトのcssの設定は
/* タイトルh6の設定
font-size:**px; フォントサイズ ピクセル指定
padding: *em; 文字と枠の隙間 padding-left:em; 文字と枠の間隔 左 color:*; 文字の色
background: *****; 背景の色
border-bottom: ***** *px solid; 枠の色と線の太さ 下
border-left: **** *px solid; 枠の色と線の太さ 左
border-radius: ｱ ｲ ｳ ｴpx; 枠の角面取り ｱ左上 ｲ右上 ｳ右下 ｴ左下
*/h6{ font-size:20px;
padding: 0.3em;
padding-left:0.5em;
color:white;
background: #AFA7C6;
border-bottom: #72136F 1px solid;
border-left: #72136F 5px solid;
border-radius: 0 0 0 4px;
}
/* p要素の設定(全体)*
font-size:**px; 文字のサイズ text-indent:em; 一行目の左余白
padding-left:**em; 全ての行の左余白゜ line-height:px; 行高さ()
*/
p { font-size:15px;
text-indent:0em;
padding-left:2em;
line-height:1.5em;
}
デザインが気に入っていただければ、このままお使い下さい。
自分で作成しています。著作権等難しいことは何も言いません。
自身綺麗に作られたページを見て「ソースを真似たい」と思うことがあります。
少しの変更で面白楽しくデザイン変更ができますので、使っていただければ幸いです。
