blogリニューアルとWordPressのメモ的な何か

wapuu

blogリニューアルしました!前々からリニューアルするする詐欺状態だったんだけど、やっと形になってきたので公開っ。更新はいつも通り気が向いたらだと思うけどね。

当初は普通にfc2ブログのテンプレを作る予定でしたが、なんだ作る気にならなかったのでWordPressを使ってみることにしました。難しいけど楽しいです。

あとサイト名も思い切って変えちゃいました。前は「どりぱけ。」というサイト名だったのですが、ヨコモのドリフトパッケージの略称と被ってるのです。ラジコン作ってたこともあるけどタミヤ派だったので当初は気付かなかったよ。
今回のみーにあという名前は前々から別の用途で考えたもの。意味があったりなかったり…

以下、メモというか詰んだところ。

公式:WordPress › 日本語
公式:CORESERVER.JP


目次▼open

HTML+CSSなど

WordPressの前にまずはある程度基本的なデザインを作成。
とりあえず今後はCSS3とか多用するのやめる…

昔はコンテンツが少ない時にフッターを下部に固定するの流行ってた気がする?んだけど、よく考えるといらないよね…意外と面倒なのにやってしまったよ。
組み始めは何もなくて寂しいからつい固定したがる。No more フッター固定!

次作ることがあったら絶対やらない。

HTML5

適当に全体像をイメージ後、今回はHTML5とやらを使ってみたかったので調べながらタグを打ち込んでみた。

参考:第5回目 HTML5で新しく定義された新要素「article要素」の使い方の基本をまとめよう – MdN Design Interactive
参考:[HTML5]アウトラインで迷わない! sectionと見出しについて – WEBCRE8.jp

なんとなく使い方を把握して、個別記事ページを想定して簡単にマークアップしてみて思った。面倒くさい!!! でもちゃんと指定してあげるとsafariリーダーが表示されるっぽい。もちろん自動で処理してるはず?だからHTML5である必要はないかもしれないけど、結構表示されない部分が多い。 とりあえず今回はiOSのsafariリーダーにちゃんと表示されるようにしてみた。

しかしiOS7で挙動が変わったのかうまく表示されなかったりする。文字数が少ないページで表示されないのは良いとして、リーダーアイコンが表示されてるからちゃんと認識してると思いきや、記事の途中までしかsafariリーダーで読み込まれてない部分がある。

どうやら<section>タグが影響してるっぽい。<article>内の<section>を全部取っ払うと表示された。けども今更変更するのも面倒なので今回は諦めた。

CSS

CSS3のdisplay:box系のスタイルを使ってみたかったんだ!というだけで使ってみることに。
もちろんIEとかoperaとか対応してないのでfloat・・ではなくposition指定で調整。 状況によっては崩れるけど対応してないブラウザは((;゜Д゜)シラナイ

後はグラデーションやシャドウを使用。これも対応してないブラウザがあるので、IE8以下にはCSS3 PIE、IE9にはSVGで対応。しかしCSS3を使ってるからなのか、PIEを使ってるからなのか分からないけど、低スペ環境では重い気がする。 それとは別にCSS3のグラデーションを背景に使った場合、Firefoxでフリーズすることがあった。

このときの背景は、まず background:linear-gradientでストライプ模様を作り、45度傾けた後にbackground-sizeでサイズ固定、そしてリピート表示したものでした。この背景が原因でFirefoxですごい負荷が。サイズ固定を解除するとまともに表示されるが、すこしスクロールすると背景が切れる。おまけに他のブラウザではストライプ模様がバラバラという感じに。
謎すぎる!面倒くさいので普通に画像使いました(´・ω・`)

それと、擬似クラスの:hoverで文字の大きさ変えたり(font-weight)、box-shadowつけたりすると低スペ+firefox環境ですごく動作が重い。
元の状態から変わることですごく負荷がかかるせい?それか他に原因があったり…

ちょこっと使ってみて思ったことは、
display:box→最初からfloatのほうがいろいろ楽
gradient→微妙に重い
box-shadow→重い
win7-i7の環境ではどれも問題なかったけど、winXP-pentiumD環境だとfirefoxで重かった。Chromeは全然問題ない。
firefoxが悪いのか、OSの違いか、Chromeが優秀すぎるのか謎である。

SVG

なんか気分的にipadで拡大表示したときに、綺麗な感じにしたかったので使ってみることに。 とりあえずシンプルなもの以外つかえないかもしれない。webkitだとドロップシャドウが効かなかったり・・透過されたりされなかったり・・・なんだか不安定。IE9が意外と優秀。

表示には埋め込んだりするのとCSSで指定するのがあるけど、今回はCSSで。背景として安定して表示させるには、擬似要素の::beforeを使ってcontentにSVGを指定してあげる方法がいいらしい。というかこれ以外は不安定だった、拡大してもぼやけたりいろいろと。

jQuery

よくわからないjquery。とりあえず最近流行りのスクロール系のは使ってみた。
あと「jquery.tile.js」など、いくつか高さを揃えるプラグイン使ってみたんだけど、Syntax Highlighterでソースコードを表示させてるページでズレることがあったので使うのをやめた。 全体の高さ調整には使わないほうがよさそう。プラグインに頼りすぎるのもよくないってことかな!

そしてIE8以下でエラーでまくる。lightpopとか・・jquery.uiとかが・・・。バージョンさげれば解決するかもしれないけどね、面倒(ry いや、手間がかかるので今回はスルーで。 つまりIE9以下はchromeframe入れてと。

クロスブラウザ

昔IE厨だったので対応したかったけど、面倒くさすぎて諦めた。jquery系でエラー出されると∩(・∀・)∩ モウ オテアゲダネ
なのでIE10以下はまったく確認してない。

どこまで対応すればいいかは難しい。小規模ブログだしwebkitだけでいいよ!ってことは無いけど、少なくともwebkit系メインで作っておけばiPhone、iPad等から見ても問題ない。(position:fixedは不安定だけど)

あとブラウザ判別にJqueryのプラグインを今回使ってしまったけど、これはやめたほうがいいと今更ながら思う。重くなるしCSSもごちゃごちゃしてしまうので、普通にHTMLソース上やCSSで振り分けたほうがいい感じ。次は使わないデス…

WordPress

ある程度できてきたらインストール!

wp-config.phpの設定

CORESERVERの管理画面でMySQLを追加する。ユーザー名とパスは好きな様に設定し、文字コードをUNICODEにする。
ここで設定したユーザー名とパスワードを、wp-config.phpに設定。
CORESERVERの場合はdefine('DB_NAME', '');define('DB_USER', '');は同じユーザー名になる。

ホスト名はlocalhostで文字セットはutf-8。あとは記述通りに設定。

WordPressのインストール+セーフモード対策

WordPressをルート直下にぶちまけるのは嫌だったので適当にフォルダを作ってそこにインストール。
とくにインストールでは問題がなかったけどCORESERVER(xrea)だと自動更新でエラーが出たので、wp-config.phpの一番下あたりに

define ('WP_TEMP_DIR','/virtual/username/public_html/site-url/tmp/');

という行を追加しておく。(位置やフォルダ名は好きな様に設定)そして、指定した場所にtmpフォルダを作ってパーミッションを707などにしておく。

次に、.htaccessファイルを作り

<Files ~ "^(admin|async-upload|update-core|update|upgrade|plugins|plugin-install|themes)\.php$">
AddHandler application/x-httpd-phpcgi .php
# PHP5.4にしたい場合 AddHandler application/x-httpd-php54cgi .php
</Files>

と設定。これをwp-adminフォルダに置く。
ついでにパーマリンクなど設定を変更するたびに.htaccessを書き換えるのも面倒なので、パーミッションを707とか777に変えておく。変更する必要なくなったら戻しておいたほうがいいかな。

またキャッシュ系のプラグインを使う場合はoptions-general.phpもCGIモードの設定がいるみたいです。

CORESERVERのセーフモード対策で現状は設定する必要があるけど、今後2014年春あたりからCORESERVERやXREAはセーフモードなしの運用にシフトしていくみたいなので、必要なくなったら外す。

ついでにインストールフォルダの.htaccessも設定。

#CGIモードでPHPを動かす
<Files ~ "^(wp-cron)\.php$">
AddHandler application/x-httpd-phpcgi .php
</Files>

#wp-config.phpへのアクセスを拒否
<files wp-config.php>
#許可してから拒否
order allow,deny
deny from all
</files>

#wp-login.php xmlrpc.phpへのアクセスを許可するIP
#<Files wp-login.php xmlrpc.php>
<Files ~ "^(wp-login|xmlrpc)\.php$">
#拒否してから許可
order deny,allow
deny from all
allow from 192.168.0.
allow from localhost
</Files>

一番上の設定は念のため。あとはセキュリティ対策。
※wp-loginとxmlrpcはjetpackの認証などで許可する必要があるので注意。その他にも外部から投稿するときなどに使うっぽいけど、個人的に使わないので制限。

またまたついでに.htaccessに設定を追加。これはルートのところでいいと思う。

# 利用可能なメモリの上限 wp-configで設定済み
php_value memory_limit 64M
#ブラウザからの データ送信の上限
php_value post_max_size 60M
#アップロードファイルサイズの上限
php_value upload_max_filesize 55M

memory_limit>post_max_size>upload_max_filesizeとなるように設定。
ちなみにCORESERVERはmemory_limitの上限が90か96Mくらいだったと思うけど、ギリギリで使うのもなぁ…
phpinfoで確認したら初期値が90Mでした。わざわざ下げる必要もないので設定しないか、90Mに設定しておくのがいいのかもしれません。
XREA掲示板の情報によると、CORE-MINIの場合は100M以上に設定してもあまり意味がないらしい。
よくある質問 | CORESERVER

WordPressの設定

と言ってもとくに弄るところがない。

インストールフォルダとサイトのトップページのURLが違うので、その設定くらいです。

基本的には一般設定で基本的な設定を行って、表示設定でトップに記事をいくつ表示するか等を設定するだけかな。

wp-contentの移動

FTPでアクセスするときに一階層でも上にあればダブルクリックの回数が減る。という理由で移動です。

いろいろ調べたけど指定方法が合わないのかうまく行かず、、できたーと思ってもURLの表記がwp/../wp-contentのようになってしまう。
どうやら記述場所がおかしかったみたいで!defined('ABSPATH')より前に記事しなければいけないっぽい?(未確認)

//* ブログアドレス (URL) – ブラウザに入力するアドレス – 末尾にスラッシュ “/” を入れてはいけません。 */

この表記より下に追加したい!ということでwp-config.phpは下記のように記述。ついでにフォルダ名変更。

define( 'WP_CONTENT_DIR', $_SERVER['DOCUMENT_ROOT'] . '/content' );
define( 'WP_CONTENT_URL', 'http://' . $_SERVER['SERVER_NAME'] . '/content');

wp-contentを移動すると、一部キャッシュ系のプラグインが正常に動かないかもしれないので注意です。
もし動かなかったらそのプラグインが指定しているwp-contentの部分を書き換えればOK。

アップロードディレクトリの場合は、管理画面から設定を開いてURLをwp-admin/options.phpと書き換えて詳細設定の項目に移動。

真ん中くらいにある
upload_path../uploadsのようにインストールディレクトリからの相対パスを入力
upload_url_pathはuploadsフォルダまでのURLを入力

これで設定するようだ。ただ今回はもう少し細かく設定したかったので
「Custom Upload Dir」というプラグインで対応。

パーマリンク設定

一番重要なパーマリンク設定です。もう設定してますが今でも悩んでます…

カテゴリー

まず一般的なブログにおいては、カテゴリーは変動する可能性があるので含めないようにする。もし突然WordPressという名前が変わってしまったらURLが全部変わってしまうので。
もちろんHTMLやプログラムのコード紹介だったり、料理、ゲーム紹介など…カテゴリーが変動しなさそうな物は含めてもいいと思う。

また複数カテゴリーに追加した場合は多分IDが低いのがそのカテゴリーURLになると思うので、カテゴリーを含めるといろいろややこしい事に。

日付

絵や写真のオリジナルコンテンツなど必要ない場合もあるけど、普通の日記だったり攻略ブログなどの場合は個人的には必要だと思います。
もちろん記事上部に日付がちゃんと書いてあれば大丈夫だけど、URLに日付があったほうがスカイプや掲示板にURLだけ貼られても、いつの記事か判別できる。

たまにURLにも記事上部にも日付がなくて、どのバージョンの設定方法か推測できなくソフトの設定に困ることがある。
個人的には年月、または年は含めて欲しい。年月日になるとちょっと見づらい。

postname

投稿するときに面倒になるけど、ちゃんと設定したほうがいい。
毎回投稿スラッグを考えるのが面倒って方は、スラッグを毎回entryなどに固定するとちゃんと連番のスラッグ名が割り当てられる。

完全に連番数字が良い方は、投稿スラッグを連番にする方法がある。この方法なら桁数も揃えられて便利。

WordPress の投稿スラッグを自動的に生成する

post_id

連番表示に使えるのかとおもったけどダメらしい。
自動保存やリビジョン、画像のアップロードなんかで増えてしまうので連番にならない。
なので連番は上記のpostnameを使う方法で運用。

ちょっと長くなってしまったけど、最終的に当サイトでは/blog/%year%%monthnum%/%postname%のようにしました。/blogを入れてるのは固定ページと分けたかったので。
カテゴリーベースと統一させてもいいかも?

ちなみにこの構造に決めた理由がgoogleのブログ。やっぱり構造が年/月/postnameのほうが無難ですね。
Google Japan Blog

カテゴリーベース

最初は/categoryを消したいなと思って、プラグインの「WP No Category Base – WPML compatible」を入れましたが、固定ページのスラッグと被ると挙動がおかしくなるっぽいので最終的に使うのをやめました。
でもデフォルトだとちょっと長いので、/catと設定。猫じゃないよ!

とりあえず今回はインストールと設定まで。
テンプレートのことまでメモってると凄く長くなりそうなので次の記事にでも。

続き:blogリニューアルとWordPressのメモ的な何か-その2

コメントを残す(仮)

△ページ上部へ