##リストじゃないものにもCS…
サイトを公開するまでにやっておくことまとめ(主にWORDPRESS)
今までサイトを沢山作ってきたのである程度作業をパターン化しておきたくてメモしておきます。
WORDPRESSのダウンロード
まずはWORDPRESSをダウンロードします。
https://ja.wordpress.org/
もちろん最新版で問題ないです。
ローカル環境にテストを置く
今はWindowsを使ってるのでLAMP環境はXAMPPに一任します。
https://www.apachefriends.org/jp/index.html
XAMPPのhtdocsの中の適当なディレクトリ(今回はC:\xampp\htdocs\wp-custom)にWORDPRESSを展開します。
後は
http://localhost/phpmyadmin/
からデータベースを作ってユーザーを割り当ててから
http://localhost/wp-custom/ (今回の設定例)
にアクセスすればインストール画面に入れる。
WORDPRESSインストール後
テーマは自作でしかも一つしか使わないので要らないテーマを削除。
CSSに記載されているテーマの設定を適当に書き換える。
今回はTwenty Fifteenをベースにしているのでこんな表記。
どうせ全部中身消すけどね。使えるところは流用。
ここからテーマの中身をガシガシコーディングしていく。
最近の個人的な流行りは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"使ってます。
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
コーディングしていく
ザクザク作っていきます。
自分の中の定番jsを読み込む。
いつも使っているスライダー
jquery.bxslider.js
フッターをぺたっと下にくっつける
footerFixed.js
canonical属性配置
<head> <link rel="canonical" href="http://example.com/"> </head>
screenshot.pngを作る。
ここにあるので調整しておく。
サイトに装備しておくもの
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
人気記事を表示してくれるプラグイン。
※追記アリ