WordPressのテーマをpinboardに変更

blogimage_20131030_2

WordPress使い始めてから、
ほとんど変えてなくて…。
スマホから見た時の見た目も変だったので、
こないだのサーバ移行を期に変えました。

変えたのはネット上で評判のよかった、
pinboardというテーマ。
デモサイトを見て決めました。

実際使ってみると、
良いには良いんだけど、
少しデモサイトと違う箇所があって
一部修正しました。

タグクラウドのスタイルがちょっと…

デモのやつが良いなと思ってたんだけど
実際入れてみると、なんの装飾もなかったので
デモサイトのCSSから頂いてきました。
設定でできるのかな?見当たらなかった。

デモサイトの
wp-content/themes/pinboard/style.css
の中のtagcloudって部分をごそっと。

そして自分のstyle.cssにペタって。

レスポンシブって話なんだけど…

デモサイトをiPhoneで見ると
けっこういい感じの見た目になってるんだけど
pinboardを普通に入れただけではそうはならない。。

一応たしかに、
レスポンシブになってるっちゃなってる。
でも微妙。

まず、モバイルからアクセスした時に
サイドバーを表示しないようにしてるんだけど
ただ単純に表示してないだけだから
右側にガッツリ余白ができちゃってる。
デモサイトでは右側ちゃんと詰めてるのに。

WordPressの作法とか全く知らないので
どこをどう修正していいかわからなくて
適当にやりました。

functions.php
pinboard_body_class
bodyのスタイルを決定している様で
ここに修正を詰め込むことにしました。

pinboard_body_classの一番上で

global $pinboard_options;

してから、
関数の一番下でこう。

if (wp_is_mobile())
{
    $pinboard_options['layout_columns'] = 2;
    $classes[] = 'page-template-template-no-sidebars-php';
}

wp_is_mobile()で
モバイルからのアクセスがわかるので
その場合は強制的にカラム数を減らして
サイドバーを表示しないbodyのスタイルにする。

@media screen and (max-width: 760px) {
    #sidebar {
	    display: none;
    }
}

モバイルからのアクセスの時は
上記のCSSでサイドバーを
非表示に切り替えてるんだけど、
これだと余白が空くのでね。

あとは、ロゴの並びとか
自分のソーシャルメディアのリンクボタンが
若干変な位置に表示されてたので

header.phpとか
sidebar-header.phpを適当にいじりました。
そりゃもう汚くいじったのでお見せできません。。

こんな風な修正って絶対非効率なんだろうな…。
慣れるまではよくわかりません。

1行短文記述スタイルはスマホで見ると変

これはもう好き嫌いだけど、
1行にダラダラ書くのがあまり得意ではなくて。

ほぼ日スタイルとでも言うのかな。
俺は別に文字数までカウントして
書いてるわけじゃないんだけど、
適当に区切りながら書いてる。

でもこれって、スマホとか携帯で見ると、
改行が適当なところで入って
なーんか見た目変になるんだよね。

んで、ほぼ日ってどうしてるんだろ…
と思って、スマホでほぼ日見てみたら
うまく改行を取り除いて表示されてました。
さすが!!

これ良いな、と思って
これも少し修正してみました。

修正したのは、single.php
ホントはfunctions.phpに書いたりして
スマートにやるのが良いんだろうけど…
ちょっと面倒でして、とりあえず。

<?php the_content(); ?>

通常はこんな風にエントリの内容を
表示しています。

<?php if (wp_is_mobile()): ?>
    <?php $content = get_the_content(); ?>
    <?php $content = apply_filters('the_content', $content); ?>
    <?php $content = preg_replace('/\<br(\s*)?\/?\>/i', "", $content); ?>
    <?php $content = preg_replace('/\<p(\s*)?\/?\>/i', "\n", $content); ?>
    <?php $content = preg_replace('/\<\/p(\s*)?\/?\>/i', "", $content); ?>
    <?php $content = str_replace(']]>', ']]>', $content); ?>
    <?php $content = preg_replace("/^\n/m", "<br/><br/>\n", $content); ?>
    <?php echo $content ?>
<?php else: ?>
    <?php the_content(); ?>
<?php endif; ?>

ずいぶんひどい修正だね。
すいません。

get_the_contentを呼ぶと
エントリの生の内容が得られるので、
それを加工する。

ほんとの生なので、
apply_filtersをして基本的な成形をする。

apply_filtersをするとbrやらpやらが
挿入されるのでそれを削除する。
pの閉じタグを二つのbrに変換。
俺の場合は区切り区切りに
空行を入れてるのでこんなんで上手く行った。

wp_is_mobile()は良いんだけど、
調べたらiPadとかもモバイル判定されるようだね。
まぁこんなブログでは細かいこと気にしないけど。

本当に適当なWordPressの話なので、
まるごとコピーしてなんて使わないでください。




コメントを残す

メールアドレスが公開されることはありません。


*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>