wordpressテーマをyokoに変更し日本語化

このサイトはwordpressを利用していますが、テーマをyokoに代えました。
先週土曜(1/28)から作業してますが、ミスも多く御迷惑おかけしています。
今回は宝くじには全く関係ない話題ですが、変更メモを残しておきます。

テーマを変更した理由

今までwordpress標準だったtwentytenというテーマを使っていました。
一時期、スマートフォン用にwptouchというプラグインも使っていました。
wptouchはダウンロードするファイルサイズが大きくて、ソースが変わりキャッシュも利用しにくいので、利用をやめました

そこで、画面横幅に応じてカラム数が代わり、スマートフォンでも見やすいという噂のyokoというテーマに変更しました。

テーマの日本語化

このテーマの日本語ファイルを見つけられなかったので、作ってみました。
ja.moja.poをテーマyokoのlanguagesフォルダにアップロードします。
日本語訳を変えたい方はja.poファイルを編集し、ja.moを作ってください。

うまい訳が出来たら、yokoの作者に教えてあげてください。

If you translated the Yoko theme in your own language it would be great if you make your work also available for other users. Just contact us at kontakt@elmastudio.de so we can add your translation to the Yoko theme folder.

だそうです。

子テーマの作成

見た目を細かくいろいろ変えるには、style.cssを変えます。
直接書くと、テーマのアップデート時に困るので子テーマにしてます。

@importで元のstyle.cssを読み込んでもいいですが、私は、@importを使わず元のstyle.cssを書き換えています。
Theme Name等を変えて、Template: yoko を書き加えたstyle.cssを作り、変えたいところを変えています。
@import使うと、変更点が多いとstyle.cssの読み込みが大変そうなんで。

とりあえず、日本語だとfont-familyは変えた方がいいかも。好みですが。

カスタムリンクカラーを無効にする方法

このテーマは、管理者ページの[外観]-[テーマオプション]でリンクカラーを気軽に変更することができます。
しかし、記事タイトル(h1タグ)もその色になってしまい、style.cssの記述が反映されません。
そこで、リンクカラーのところの文字色(標準だと#009BC2)を消して保存します。
そうすると、style.cssの指定が反映されるようになりました。

(文字色に記述があると、各htmlページのheadタグの最後にリンク色のstyleタグが追記されます。文字色がないとこの部分が記述されません。テーマyokoのincludesフォルダのtheme-options.phpの120行目を参照)

ヘッダーの画像サイズを変更

ヘッダーの画像サイズは標準だと1102×350ピクセルです。
そんなに大きくてかっこいい画像が用意できないんで、小さくしました。
functions.phpの次の2行の数字のところを用意する画像のサイズにを変えればいいですが、私は子テーマで変えてます。

define( 'HEADER_IMAGE_WIDTH', apply_filters( 'yoko_header_image_width', 1102 ) );
define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'yoko_header_image_height', 350 ) );

画像の高さの変更はここだけでよいですが、幅を変えるならstyle.cssも変えることになるかと思います。
(1カラム目の幅、2カラム目の幅、などなどの指定を変えなきゃ)

現状は

以前よりファイルサイズが大きくなってしまい、ページ表示が遅いです。
今後はもっと軽くしたいし、見た目をもっとスマートにしたいです。
軽くするためcssファイルをGZIP圧縮したいが、敷居が高そうと躊躇してます。
.htaccessにmod_rewriteを追加すればよさそうだけど、不具合でそうで。

見た目は、、、以前もそうですが、自分のセンスのなさが悲しいです。
なぜか、いじればいじるほど、元よりもダサくなっていくんですが。

—追記—
スマートフォン対応はyokoのようなMedia Queriesを使ったサイトが良いってグーグル社員も言ってたそうです。
ウェブマスターツールのモバイル検索インスタントプレビューだとPC検索と同じだったから、モバイル対応できてないとみなされないか不安だったんだよね。
今は判別できなくても、そのうちグーグルも考慮してくれるでしょう。
今のところは、モバイルからのアクセスは増えているぐらいだし。

4件のコメントがあります

  1. Endy

    初めまして。最近WordPressを始め、Yokoテーマを導入したものです。大変初心者で申し訳ないのですが、ホームを押して最初に表示される記事の一覧をアーカイブや検索で表示する抜粋(100文字程度)で最後に”続きを読む”というような表示の仕方に変えたい場合はどのテンプレートを編集すべきか教えていただけないでしょうか?

    メインインデックス(index.php)とアーカイブのテンプレートを比較してみるとwhileループでしているのは同じようです。これが記事を表示している部分だと思うのですが同じ呼び出し方しているのに表示が異なるのが不明でして・・・

    お分かりになりましたらぜひご教授ください。

    ——– コメントに対する返信 ——–
    コメントありがとうございます。
    続きを読むといった表示にするには、yokoのテーマだとcontent.phpの25行目にある the_excerpt(); を使います。
    the_contentの代わりにこれを使えばいいのですが、index.phpだと、content.phpを呼んでいるのかな。
    index.phpに全て書いてしまった方がわかりやすい気がします。
    index.phpをコピーしてhome.phpとして、直すと他への影響がなさそうです。
    時間があるときに考えてみますが、wordpressのフォーラムで聞いた方が早いかも。

  2. Endy

    早速の返信ありがとうございました。content.phpみてみるとis_archive()とis_searchのときだけ抜粋表示のthe_excerpt関数たたいてました。ここの判定処理いじって試してみます。的確なアドバイスありがとうございました!

    追伸
    毎週ロト6買ってます(笑)
    今回のグリーンジャンボ、私も同じ気持ちで購入しました(^_-)お互い当たるといいですねぇ

    ——– コメントに対する返信 ——–
    解決につながりそうでよかったです。
    is_front_pageを追加するとよさそうですね。
    content.phpではなく、content-single.phpが呼ばれているかもしれないので、その辺は試してご確認ください。

  3. Endy

    何度もすみません。ようやく対応できました。まさにcontent.phpのif文にis_front_page()追加での対応です。C言語は扱えるのでなんとかソースは読めるところもあって良かったです。
    これから徐々に勉強していきます。
    本当にありがとうございました。

    ——– コメントに対する返信 ——–
    解決してよかったです。wordpressの記事はほとんどないですが、これからもよろしくお願いします。
    wordpressのテーマを空テーマから作るというのはおもしろそうですね。
    私も自作テーマにも興味があります。がんばってください。

コメントを残す

CAPTCHA