【WordPress】無料テーマのBizVektorを使ってみた-表示カスタマイズ1

Total 2,958 views
この記事の所要時間は約 7分です。

個人的にはそのまま使っても問題なしと思われる BizVektorですが
多少は自分用にカスタマイズしてみたいじゃないですか。

そんなこんなの細かいカスタマイズは個々にお任せすることとして
今回は私が「ここは変えたい」と思ったところを中心にご説明していきます。

スポンサーリンク


追記 -2014.3.22-

BizVektor についてはこれまで度々カスタマイズの記事を書いてきましたが、バージョンアップの間隔が短く変更内容も一気にガラっと変わることも多いため、とうとうカスタマイズが追いつかなくなりました。
テーマが複雑でカスタマイズが難しいというのもあります。

よって BizVektor を使ってのサイト構築記事はちょっとお休みすることにしました。

ここは参考記事として残しておきますが、内容は古いバージョンについてのものです。ご了承ください。

 

イメージ画像

 

以下がデモページのキャプチャ画像です。

キャプチャ画像

 

抜粋の文字数変更

トップページに表示される最新のブログ記事はデフォルトでは抜粋方式になってます。

ただデフォルトの文字数だと 110文字とちょっと少ないので
もう少し多めに見せる工夫をしてみました。

キャプチャ画像

 

これに関してはいろんなやり方があるようですがなかなかうまくいきません。
そんな中、唯一このテーマで有効だったのが下記の方法でした。

1.WP Multibyte Patch プラグインを有効化します。
(有効化してある人がほとんどだと思いますが)

2./wp-content/plugins/wp-multibyte-patch/wpmp-config-sample.php をコピーし、
名称を wpmp-config.php に変更します。

3.変更したファイルをエディタで開き 6行目あたりにある
$wpmp_conf['excerpt_mblength'] = 110; の「110」を任意の数字に変更します。
今回は多めに表示したいので「250」にしてみました。

4.修正した wpmp-config.php は wp-content フォルダ内に移動させます。

これで抜粋文字数が変更されます。
(Wordpress アップロード時は消えてしまうので何らかの方法で保管しておきます)

追記 -2012.8.26-

コメントにて『抜粋の文字数の変更方法ですがプラグインのファイルを書き換えるとアップデート時に支障が出るので以下の方法を推奨します。テーマファイル内の the_excerpt();→echo mb_substr(get_the_excerpt(),0,250);に変更』とのご指摘をいただきました。

この方法は以前試したことはあったのですがその時はなぜかうまくいかなかったので外しておいたんです。しかし再度試したところ問題ないことが判明したのでこの場で追記とさせていただきます。(何かの文字が抜けてたとかそんな理由だったのかもしれません)

以下、追記分となります。

1.親テーマファイルの module_loop_blog2.php を子テーマにコピーします。

次に同ファイル 12行目の <p><?php the_excerpt(); ?></p> <p><?php echo mb_substr(get_the_excerpt(),0,250); ?></p> に書き換えてアップします。

 

アイキャッチ自動表示

トップページのブログ最新記事抜粋表示はデフォルトで 5 件表示、
さらにアイキャッチがあればアイキャッチを右端に表示させ
なければ横幅いっぱいにテキストを表示させる仕様になってます。

アイキャッチの表示画像サイズは仕様では 80×80pxです。
(記事数やサイズは変更も可能ですが今回はそのままでいきます)

キャプチャ画像

 

問題となるのが
アイキャッチ画像があったりなかったりするのがデザイン上どうなのかということです。

つけるなら全部つけた方がいいと思いますが、その反面、毎回アイキャッチ画像を考えるのが実は面倒な時もあります。

そこでアイキャッチ画像を作成した時はそれを表示させ
作らなかったあるいは作る暇がなかった時は
自動でデフォルトのアイキャッチ画像を表示させられると便利です。

そんなことを考えていたら
かちびとさんが「Wordpressのアイキャッチ画像に任意のデフォルト画像を登録する方法」というのを紹介しておられたのでそれに乗っかることにします。

 

最初に何も設定しない時用のデフォルト画像を
管理画面サイドバーの「メディア→新規追加」でアップしておき
同時に画像 ID もチェックしておきます。

その上で予め子テーマに作っておいたまっさらな functions.php に下記を加えます。

上記「125」という数字は各人異なるので調べて変更してください。

これで準備完了です。

付け加えておきますが、テーマ制作者側は『アイキャッチ画像が設定されていない場合は一覧表示の際にダミーの画像でも表示させようかと思いましたが、その場合当然「ダミーの画像を設定する」という項目が増えてどんどん複雑化・処理が重くなるので、ストレートに「アイキャッチ画像が設定されていなければ何も表示しない」という仕様にしました。』と説明しておられます

まさに制作者の意図に反する行為となってしまいました。(笑)

しかし一方では『サムネイル画像については、記事の投稿画面の右下の「アイキャッチ画像」を設定するとその画像がサムネイルとして使われます。
『※この画像はOGP画像としても使用されます』ともありますので Facebook 対策上、やはり設定しておいた方がいいかとも思います。

 

アイキャッチ画像表示時のみの不具合?

アイキャッチ画像を設定すると若干不都合なことが発生します。

調整ミスかと思うのですが
下の画像のようにリンク上のマウスの位置によってはリンク機能が働きません。

キャプチャ画像

 

調べた限りでは
トップページのアイキャッチ画像は絶対位置で配置されており
その領域横幅サイズが(全体横幅の)35%という相対数値で設定されています。

これは iPhoneや iPodなどでのアイキャッチ表示領域用の数値だと思いますが
そこをちょっと変えてやることで PC上の不具合は解消されます。

キャプチャ画像

 

plain.css 内の下記プロパティの数値を子テーマの style.cssに上書き設定します。

数値は絶対数値にして
アイキャッチ画像の幅 80pxよりちょっと多い 100pxに設定してみました。

これでテキストリンクのどこをマウスオーバーしてもリンクが有効になります。

ここの数値をオリジナルの 35% から 15%などの小さめの数値に設定すると iPod(iPhone)でのアイキャッチ画像そのものが小さくなってしまいます。(占有領域は変わりません)

しかし 35%以上にしても大きくなることはありません。そのためモバイル用の優先設定が別にあるものと思われます。

どなたもそうでしょうが、他人様が書いた構文はそれぞれにクセがあるのでホントわかりにくいです。

 

アイキャッチをブログ記事にも表示させる

トップページの抜粋にはアイキャッチ画像のサムネールが反映されるのですが
ブログ記事ページにはなぜかアイキャッチが表示されません。

この仕様は私にはよくわかりませんが
せっかく設定したアイキャッチを記事本文ページにも表示させてみようと思います。

私はあまりアイキャッチ画像をデカデカと載せたくない派なので
今回は Facebook OGP設定の推奨画像サイズの 200×200pxで設定することにしました。

 

single.php をコピーして子テーマに置き
12行目の投稿日の表示設定の下に下記のアイキャッチ画像ブロックを加え
float で右寄せにします。(あくまで私の一例です)

再度、かちびとさんの記事まる写しです。
アイキャッチがあればそれを、なければデフォルト画像を表示せよという意味です。

 

CSSは下記です。

そのままだと画像の下にテキストが回りこまないのでテキストが回り込むような設定で上書きします。
(回り込むほど長いテキストを書くことはないみたいですが……)

これで下記のような表示になります。

キャプチャ画像

 

ただしこれを iPod(iPhone)などで見ると
下の画像のようにアイキャッチ画像が大きく表示されすぎてちょっと見栄えが悪いです。

そこでこの画像表示サイズを変えてやります。

キャプチャ画像

 

変更に際してですが
このテーマは CSS3のメディアクエリを利用してレスポンシブウェブデザインを実現しているようなんですが、iPhone 等での表示設定を記した CSSがどうやっても見つけることができませんでした。

なので自分で勝手に追加してみます。

子テーマの CSSに下記の iPod(iPhone)専用の記載を追記します。
(@は半角に直してください)

上記 { } の間に、
アイキャッチ画像幅は全体の 50%にするという意のプロパティを付け足します。

これで下記のような表示に無事なりました。

キャプチャ画像

 

以上です。

スポンサーリンク

ブログランキングに参加してます。よろしければポチッとな。

お気軽にフォロー↓してください。

ブログ更新情報はこちらからどうぞ。

follow us in feedly

6件のコメント

  • queschoon

    Webtrace管理者様

    お世話になります。
    本当にありがとうございますm(_ _)m

    宜しくお願い致します。

    • lacuisine

      queschoon様
      記事にして回答しておきました。ご参考になれば幸いです。
      http://webtrace-cuisine.com/201209/newlayout/

  • queschoon

    webtrace様

    はじめまして。BizVectorカスタマイズ、本当にお世話になっています!
    表示系のところで、どーしてもできないことがありまして・・・思い切ってお伺いしたくて投稿させていただきました。
    本当に申し訳ないのですがご教授いただけませんでしょうか?

    内容としてはブログ投稿記事を横並びに表示させたいという内容になります。
    現在、
    ————————
    ブログ記事
    ————————

    記事① タイトル
    ————————画像
    記事内容

    記事② タイトル
    ————————画像
    記事内容

    このような形でリスト形式で表示されますが、

      ①  →   ②      ③
      画像  |  画像  |  画像
     タイトル | タイトル | タイトル
     記事内容 | 記事内容 | 記事内容

     ↓

      ④  →    ⑤      
      画像  |  画像  |
     タイトル | タイトル |
     記事内容 | 記事内容 |・・・・・・・

    といった格子状に並べていきたいのですが、できますでしょうか?

    いきなりのご質問で大変申し訳ございませんが、何卒宜しくお願い致します。

    • lacuisine

      webtrace 管理人です。コメントありがとうございます。ご質問の内容はわかりました。
      ただ BizVector を使っている実際のブログなんですが、実は 2日前からアイキャッチのサイズや表示方法が気に入らず、アイキャッチそのものを廃止して記事の 1番最初に出てきた画像をサムネールとして表示させるという風に変えてしまっているので、若干 HTML の部分が記事内容と異なっております。(このことは追記として記載しておくつもりだったのですが、間に合っていませんでした)
      なので、少々お時間を下さい。ざっと考えるにdivブロックを新たに作ってfloat:left; にすれば大丈夫かと思いますが、実際にやってみますので。それでは一旦失礼します。

  • kei

    抜粋の文字数の変更方法ですが、プラグインのファイルを書き換えるとアップデート時に支障が出るので以下の方法を推奨します。

    テーマファイル内の
    the_excerpt();

    echo mb_substr(get_the_excerpt(),0,250);
    に変更

    • lacuisine

      kei さん、コメントありがとうございます。
      確認して追記分として更新しておきました。

コメントを残す




日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)