サイトを公開するまでにやっておくことまとめ(主にWORDPRESS)

2020年10月10日

今までサイトを沢山作ってきたのである程度作業をパターン化しておきたくてメモしておきます。

WORDPRESSのダウンロード

まずはWORDPRESSをダウンロードします。 https://ja.wordpress.org/ もちろん最新版で問題ないです。

ローカル環境にテストを置く

今はWindowsを使ってるのでLAMP環境はXAMPPに一任します。 https://www.apachefriends.org/jp/index.html

XAMPPのhtdocsの中の適当なディレクトリ(今回はC:\xampp\htdocs\wp-custom)にWORDPRESSを展開します。

wp01

後は http://localhost/phpmyadmin/ からデータベースを作ってユーザーを割り当ててから

http://localhost/wp-custom/ (今回の設定例) にアクセスすればインストール画面に入れる。

WORDPRESSインストール後

テーマは自作でしかも一つしか使わないので要らないテーマを削除。

wp02

CSSに記載されているテーマの設定を適当に書き換える。 今回はTwenty Fifteenをベースにしているのでこんな表記。 どうせ全部中身消すけどね。使えるところは流用。

wp03

ここからテーマの中身をガシガシコーディングしていく。 最近の個人的な流行りはSublimeText + Koala。

レスポンシブ用にCSSを書いちゃう。

最近もうレスポンシブのサイトしか作らなくなってきたのですが、 個人的にはこんなやり方してます。

style.css
/* CSS import */
@import url('sp-style.css') screen and (max-width: 768px);
@import url('pc-style.css') screen and (min-width: 769px);

sp-style.cssとpc-style.cssを直接FTPでアップしちゃうやり方でやった方が楽かなーと。 前は一枚のCSSにまとめて書いてたんだけど、かなりメンテナンス性の面で面倒だったのでこうしちゃいました。

「一枚のほうが楽じゃん」って言う人もいると思いますが、個人的にはこの方が楽です。

ホントは@importとか嫌なんですけどね。仕方がないね。

Fontを決める

とりあえずWEBフォントです。

/* IE */
@font-face {
font-family: フォント名;
src: url(font/フォント名.eot);
}
/* Firefox, Opera, Safari */
@font-face {
font-family: フォント名;
src: url(font/フォント名.ttf) format(”truetype”);
}

ってな感じでfontを決めても良いんですけど。 楽なのでGoogleWebFontを使うか、

https://www.fonts.com/ja/ で探すか、なんですけど

よく　"Lato"使ってます。

コーディングしていく

01

ザクザク作っていきます。

自分の中の定番jsを読み込む。

いつも使っているスライダー

jquery.bxslider.js

フッターをぺたっと下にくっつける

footerFixed.js

canonical属性配置
screenshot.pngを作る。
wpwww

ここにあるので調整しておく。

サイトに装備しておくもの

CSSライブラリ編
colors.css

http://clrs.cc/ blue, red, yellow, gray, blackなど、現在スタイルシートで名前で利用できるカラーをモダンな感じにするライブラリ

プラグイン編
BackWPup

バックアップを取ってくれるものの中で一番使いやすかったのでこれを選択。dropboxやgoogleストレージにも対応している。今自分が扱っているサイトはすべて別サーバーにFTPを介してバックアップを取っている。これが非常に便利。

Akismet

これは勝手に入ってる。

Auto Post Thumbnail

アイキャッチ画像を指定していない記事にアイキャッチ画像を自動で作ってくれるプラグイン。

Breadcrumb NavXT

パンくずリストを作ってくれる。

Contact Form 7

定番のお問い合わせフォーム

Google XML Sitemaps

その名の通りXML Sitemapを作ってくれる。似たような名前のプラグインが多数あるので注意。

Jetpack by WordPress.com

パブリサイズ共有を設定するのに便利。その他いろいろな機能がついている。

Jetpack by WordPress.com

パブリサイズ共有を設定するのに便利。その他いろいろな機能がついている。

Ktai Entry

携帯からのメール送信で投稿するために使っている。

Search Regex

ドメインが決まっていない状態など、仮サーバーから本番サーバーへ移す時に一括で絶対パスを変更するのに使用。

TinyMCE Advanced

記事作成時の投稿画面にリッチエディタを装備

User Role Editor

各グループの持つ権限を詳細に追加したり削除したりすることができます。複数のメンバーでサイトを運営する時などに便利なプラグイン。

WP-PageNavi

アーカイブページのページング機能をプラグインで構築。

Wp Pagenavi Style

WP-PageNaviのデザインを自由に決められるプラグイン。

Custom Post Type UI

カスタムポストを使いやすくしてくれるプラグイン。

SyntaxHighlighter Evolved

当ブログのようにコードを記事に埋め込む時に便利。

What’s New Generator

新着情報を指定した固定ページや投稿に自動的に表示するプラグイン。

WordPress Popular Posts

人気記事を表示してくれるプラグイン。

※追記アリ

Related Posts

HTML/CSS, SEO/SEM, WORDPRESS

Posted by bistro