2007年にこのサイト開設してから
ずっと同じだったサイトデザインをようやく変更してみたよ。
…うん、地味。前にもまして地味。
そのくせヘッダーが無駄にでかい。そのうちウザくなったら変えるかも。
ベースにしたのはWordPressデフォルトテーマのひとつ、みんなだいすき Twenty Twelve です。
うん。WordPressテーマなんて探せば無料で可愛いのがいくらでもありますが、なんだかんだで最近いつもこれ使っちゃう。
シンプルでカスタマイズしやすくてすげー私好み。
レスポンシブなのでこのままでもスマホで見られるはずですが、
せっかくWPtouchいじったんでしばらくそのままにしておきます。
スマホの人は画面下で「モバイル/PC」が切り換えられるはずなので、お好きな方で見てくださいませ。
あ、デザイン崩れてるとかあれば報告もらえるとうれしいですー。
スマホから見ている人はお気づきかと思いますが、スマホ版のデザインが変わりました。
このサイトのスマホ用表示、WPtouch というプラグインを使ってるんですが、
これの最新バージョンのデザインが気に入らなくて実はずっと古いバージョンを使い続けてました。
んが、いつまでも古いの使うのもセキュリティ的によくない気がするし、
実はAndroid4.1では正常に表示されないバグとかあるらしいし、
ようやくアップデートしてみることにしました、というメモです。
WPtouch3系のカスタマイズ情報ってググっても少ししか出てこなくて苦労した…！
今はレスポンシブのほうが流行りっぽいけど個人的にレスポンシブあんまり好きじゃないんで…あれスマホでも一応見れるってだけでスマホで使いやすいってわけではないやん…？
まず、言語選択で日本語を選んでも何故かうまく日本語化されません。
旧バージョンのときは wptouch-pro-ja_JP.mo を ja_JP.mo にリネームすればよいという話もあったんですが、それでもうまくいかず。
いろいろ試した結果、
を
にコピーすることでうまくいきました。
無料版だとテーマはBauhaus一択の模様。
デザインを本気でがりがりいじりたい場合は、plugins/wptouch/themes/bauhaus/default/ および plugins/wptouch/themes/foundation/default/ 以下のファイルを編集することになりますが、
サムネイルの表示調整とかカラー設定くらいならテーマファイル直接いじらなくても管理画面から変更できます。
というか、テーマファイルいじっちゃうとアップデートの際に面倒なのでなるべく管理画面だけで完結させるスタンスです。
とにかく画像ばりばり文字でかでかの派手なデザインが好みじゃないんで、なるべくシンプルになるように設定を試みます。
にチェック。上記以外のチェックは全部外す。
色とかアイコンとかの設定。PCサイトのイメージに合わせて適当に。
えー、ここが今回のキモです。
本来はサイトフッターに表示させる文字列やらアクセス解析用のタグやら入れる部分ですが、
ここにがりがりとCSSを書いていく作戦です。
<style type="text/css">
/* パーマリンクのタイトル部分を調整 */
.post-page-head-area.bauhaus{
text-align : left;
padding : 5px;
}
.post-page-head-area.bauhaus h2.post-title{
font-size : 120%;
font-weight : bold;
margin : 0 0 0 10px !important;
padding : 0;
}
/* 一覧画面の記事リンク部分を狭くする */
.loop-link{
min-height :40px;
padding :0;
}
#content .loop-link h2{
font-size : 120%;
line-height : 120%;
}
/* 前後の記事へのリンクも狭くする */
.nav-controls a.prev-post, .nav-controls a.next-post{
padding-bottom :0;
}
</style>
だいぶみっちりした印象になりました。
…最近のトレンドからは外れてる気もしますが。個人的に一画面になるべく多くの情報が詰め込まれてる方が好みなんだよね。
このカスタムコード部分にはたぶんjQueryでDOM操作とかも書けると思うんで、うまいことやればテーマファイルには手を入れずにかなりカスタマイズできるんじゃないかと思います。
PCページと同様に「管理者にのみコメント送信」のフォームを付けたい。
こればっかりはテーマファイルを直接編集しないと無理っぽい。
<?php echo do_shortcode( '[[contact-form-7 id="1" title="コンタクトフォーム 1"]]' ); ?>
あとはさきほどと同様にカスタムコード部分にCSSを書いて見た目を調整。
旧バージョンSS撮るときに解像度間違えたから比較になりにくいけど一応…。
気が向いたらそろそろPC版のデザインもどうにかしたい。。。
このブログは基本的には育児及び日常徒然ブログなんですが、たまに書くメモ記事ばっかりがアクセス稼いでる不思議！
普段の固定読者より検索でたどり着く一見さんの方が多い＼(^o^)／
なお、現在このサイトの人気記事トップ3は
の模様。
…個人的に検索でたどり着いてほしい記事は
とかなんですけどね！
（今「キングスライム かわいい」で検索してみたら1ページ目に出たよ！やったね！）
＊＊＊
で、本題
WordPressにスマホから投稿しようと思うと、普通に公式のアプリがあったりするんですが、
これが残念ながらカスタムフィールドに対応してないんですよねー（たぶんXMLRPCだから仕方ないんだけどね）
で、スマホのブラウザから直接管理画面にアクセスすると、どうにも使いづらい。
調べてみると、WordPress Mobile Adminってのが良さげだったんですが、なんか登録が必要＆無料登録が見つからない…。有料化されちゃったんだろうか。
で、さらに調べてると、
どうやら公式でMP6なるデザインが開発されてるらしい。
レスポンシブデザインらしい。ということはスマホでもいい感じに使えるのでは！
プラグイン化されてるらしいのでインストールも簡単！
早速試してみた。
＜ビフォー＞
＜アフター＞
ふむ。
横幅狭くするとメニューとかがいい感じにミニマム化されますね。
悪くないんじゃないでしょうか。
なお、プラグインのページには
「This plugin is a secret; don’t tell anybody about it.」
とか書かれてて、まだ公式に推奨されてるわけではないらしい。
実験中って感じでしょうか。
とりあえずしばらく使ってみる。
結構騒ぎになってるので一応。
このサイトはロリポップではないですが、WordPress使ってるので一応確認。
今のところ乗っ取られてるような形跡はありませんでした。
でもこれから何かされる恐れもあるので、もしサイトに不審な表示を見つけたら連絡もらえるとありがたいです。
しかし情報集めてみても原因わからなくて怖いな…
ログインフォームへのアタックだって言ってる人もいるし、設定ファイルのパーミッションの問題って言ってる人もいるし、DBの設定の問題って言ってる人もいるし…
とりあえずログイン画面にBASIC認証と設定ファイルのパーミッション確認とDBパスワード変更でOKだろうか。
念のためプラグインのアップデートとかもやっとこう。
(追記)
一応公式発表では原因らしきものが発表されてるんですね。
WordPressのプラグインやテーマの脆弱性を利用し、不正なファイルがアップロードされました。
またそのファイルを利用し、wp-config.phpの設定情報が抜き出されることにより、データベースの書き換えが行われ、WordPressサイトが改ざんされました。
ただ、今回被害者の使っていたテーマやプラグインはバラバラみたいなので、特定のプラグインの脆弱性とかいうわけでもなさそうな…？
ともあれ、wp-config.php見られる→DBパスがバレる→改竄 っていう手口なら、wp-config.phpのパーミション設定＋DBパス変更で当面は安全？
あ、でも自サイトに仕掛けられたスクリプト経由だったらパーミッション400でも見られちゃうのか。やっぱ「不正なファイルがアップロード」の手口がわからないとどうにもならないなー。
(追記2)
おーなるほど。シンボリックリンクって閲覧権限無いファイルにも張れるのか…って、よく考えたら存在しないファイルにだって張れるんだからあたりまえか。
SymLinksIfOwnerMatch って初めて知った。確認しとこう…。
■カテゴリ別記事一覧を追加したよ
ふと古い記事を見返そうと思ったらすさまじく見通しが悪いことに愕然として勢い余って作った。
長いです。6年分。後悔はしてない。
PCの方は上部ナビ、スマホの方は右上のメニューっぽいボタンからどうぞ。
こういうのがプラグインで簡単にできるのがWordPressの便利なところ。
■ショートコードを作ったりプラグイン化したりしたよ
amazonアフィを簡単に貼りたくてプラグイン探したら検索機能とかのついた大げさなものばっかりだったので、
もっと簡易的なのないかなー。デフォルトデザインでいいならいっそショートコードで十分じゃね？
と思ってショートコード作った。
function amazon($atts){
extract(shortcode_atts(array('asin' => 'xxxxxxxx'), $atts));
return '<iframe src="http://rcm-jp.amazon.co.jp/e/cm?lt1=_blank&bc1=FFFFFF&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=hebonshiki-22&o=9&p=8&l=as4&m=amazon&f=ifr&ref=ss_til&asins=' . $asin . '" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe>';
}
add_shortcode('amazon', 'amazon');
[amazon asin=xxx] でアフィ表示されます。
（って書こうとしたら↑のコードが展開されて困った。ショートコードのコードを記述したい場合は
[[amazon asin=xxx]] みたいにカッコを2重にすればいいっぽい。）
…が、なぜかスマホでうまく表示されない。
調べてみたら、スマホ表示用プラグインのWPTouchがショートコードと相性悪いらしい。
上記のページに従ってプラグイン化したらうまくいきました。
なんでもかんでもfunctions.phpに書くのよくないんかなー…
■コードハイライターを導入しようとしてテーマファイルのバグを発見したよ
↑みたいにプログラムのソースコードをいい感じに表示したくて、プラグインを導入。
しかしなぜかうまく表示されない。なんでー。
結論としては、footer.php に wp_footer(); が抜けていたのが原因。
ヘッダ側は wp_header() じゃなくて wp_head() なのね…。
そろそろテーマファイル作り直したいな。
ろくな知識も技術もない6年前に作った適当デザインですからね！「firefox1.5で動作確認」とか時代を感じるね！
最近だとWPTouchよりレスポンシブが流行りなんだろうか。
Wordpress使いこなせたらいろいろと金になりそう 便利そうなので一回真面目に勉強したい。