ブログリニューアル時に助けられたプラグインや考えた事 #WordPress

このブログは結構前にデザインしていたので、
新しくしたいなとは思っていたのですが、
結構前に、やっとリニューアルしたものをアップしました。

これがリニューアル前のデザインです。
前のブログデザイン

まずはURL変更

どーゆー事かと言うと、
ブログのカテゴリやタグがゴチャゴチャいていて、
かつカテゴリをURLに含んでしまっていて変更するとURLも変わってしまうため、
整理したくても出来ない状態でした。。

こんな感じ。
backless.org/design/999.html「カテゴリーがdesignの場合
カテゴリを変更すると
backless.org/css/999.html「URLが変わってしまう

そこで、リダイレクトプラグインを使用。
リンク切れはなくURLを変更できました!
ただ、はてブやソーシャルからの部分はURLが変わってしまったので、
その数は引き継げませんでした。

(そんなに多くないですし、リダイレクトでページには来てもらえるので良しとしました)

パーマリンクの変更後、旧アドレスでもアクセスできるWordPressのプラグイン | コリス

新規に制作したWPのテーマのプレビュー方法

最初につくったときは、トラフィックなんて皆無だったので
公開したまま制作していたのですが、
今回は多少なりとも見てくれている人がいます。

「ローカルで環境作らなきゃかなー」とかって思っていたら
素晴らしいプラグインを見つけました。

新しいテーマを作ったりするときにローカル環境無しでWordPressのテストが出来るTheme Test Drive | ごりゅご.com

これはログインした人のみに指定したテーマを表示するもので、
ローカルに環境を作らなくてもWeb上で公開してるのと同じ状態で確認できるのです!

めっちゃ便利w

インクルード方法

自作のPHPをインクルードする方法です。

どーゆー事かと言うと

<?php get_header(); ?>

って書いたらheader.phpをワードプレスさんが読み込んでくれますよね?

じゃあanobasyo.phpってphpを読み込むには?
答えはこれです。

<?php get_template_part('anobasyo'); ?>

こう書いてあげると好きなphpを好きなところで読み込んでくれるんですよ。
例えば、共通で読み込んでるバナーなんかを切り分けておくとか便利ですよね。

今回は2カラムから3カラムにしたので、
1カラム分の内容を記述したphpを別に用意しましたー。

WordPress(ワードプレス)でテンプレートにテンプレートを読み込む方法(インクルードタグ) #wp

変更した点や考えた事まとめ

あとは勢いで公開しただけですねw
個人的には前回よりはかっこよくなったかなと満足してますw

全体感としてはシンプルにかっこよくしたいと思ってリニューアルしました。

2カラムから3カラムに変更

3カラムにし、コンテンツ以外の2カラムはバナーでよくあるサイズに変更しました。
前のサイドナビにあったのものをふたつに分けていらないものを削ったりしました。
具体的には、

・「タブ切り替え機能」
カテゴリなどをタブで切り替えてましたが、ぜんぶ見せるように変更。
クリックは手間だと思ったので。

・「新着10記事」
これはブログトップに行けば見れますからね。削除しました。

・「はてブ、アクセス数、FBおすすめ」を並べた。
違う切り口での人気記事を訴求したかったので。

・「カテゴリ」を整理して2つに。
ちょっと絞りすぎかと思いましたがタグもありますし、
前までが多くて訳が分からなかったので、シンプルでいいかなと思ってます。

・「タグ」の表示数を制限。
タグも整理したいと思いつつ、多い順に10個まで並べることに。

ヘッダを小さくナビもシンプルに

今までドーンと表示されていたヘッダのロゴを小さくしました。
ページ上部に固定していたナビもはずし、シンプルにロゴ横に配置。

コンテンツタイトルも色や装飾をなくしシンプルに

テキストとマージンのみ
タイトルのレベル感やコンテンツの分かれ目を表現しました。

背景に色をつけた

ヘッダにあった大きなロゴがなくなってしまうので、
それに変わるものとして、背景色をつけてみました。

ブログのイメージである緑に、赤と青がランダムで表示されるようになっています。
その3色にしたのはWebなのでRGBからというのと、
ページ遷移やブログにランディングしたときに、
ちょっとでも新鮮な気持ちになってもらえたらいいな
とゆーところから。

フッタもシンプルに

以前はそこから回遊できるように
サイドナビにあったはてブ数ランキングなどを表示させていただのですが
ごちゃごちゃしていたので外しました。

色も緑から黒に変更し、全体を引き締めると共に
背景色が変わったときに違和感が無いようにしています。

最後に

またこっそり変えていくと思うので
上記と矛盾が生じてくることもあるかと思いますw
その時はごめんなさいw

デザインやってる人はよくわかると思うけど、アレな気分です。
1日寝かしてみたらちょっとこれは。。って思うアレです。
(この現象に名前はあるんだろうか?)

正月休みの変なテンションのときに作ったのをドンとアップしてしまったので
アレがきてます。
失敗したー。もっと考えてからアップすればよかったー。と思いつつ
新しくなったブログ共々、よろしくお願いいたします!

この記事に関連する記事

コメントをどうぞ