MinimalWPのテーマを買ってみたので早速装備した件


Ultrarocketman theme0208

はじめてWordPressのテーマを買いました!

初めてという事もあって、国内・国外のいろんなテーマ売ってるサイトを眺めに眺めまくり、もうひたすら眺めたのですが、あ、あとめっちゃ眺めました。
最終的にMinimalWPというそこそこ有名(だそう)なサイトでUltra Rocket Manを買ってみました。


テーマを買った理由

もともと先月までWordPressをたてた時に1から全部自分で書いたCSSを当てて運用してたのですが、ずーーーっとスマートフォンやタブレット端末(以下:ハイエンド端末)向けのデザインを作ってなかったのが心の刺でした。

構想としては、レスポンシブデザインでブラウザの画面サイズに合わせたデザインを作ろうと意気込んでいた時期もあったのですがどうしても時間をさけず!(ToT)
※ただ本人のやる気がないという噂も。( ゚д゚)
けど今からまた苦手なCSSやJSで1から書いていくと果たして何時間くらいかかるだろうか? と考えると、どう考えてもその稼動をRaisや最近はじめたiOSの学習に充てたほうが現時点では有益すぎるだろjk などと思ってしまい、ネットでテーマを拾う事を模索しました。

そんなこんなで2年くらい経ってふとデザインに詳しい先輩(今回も@basara6669さまに聞いてしまいました。。)に何気なく相談したところ、「デザイン買うのもアリだよ」との事。

その発想はなかった(゚∀゚)

もちろん無料のテーマでもStingerとか使えば全然カッコイイんですが、何気に自分「シンプルなデザイン至上主義」みたいなところありまして、あえてナウいblogデザインじゃないテーマを探していたら有料のサイトだとザックザク出てくる!

てなわけでレスポンシブ対応で、かつシンプルなデザインのテーマを買っちまおうと決意しました。

MinimalWPに行き着く

ネットでの捜索活動はまる1日ほどかかりました、「wordpress 有料テーマ」などで検索すれば、イケてるテーマサイトのまとめ記事とかがたくさん出てきて助かりましたが、とにかく量が多い件orz海外のサイトとかも対象に探しまくっていたら日が暮れました。

最終的には、
・日本語で説明や規約が読める国内のテーマ
・デザインの趣味がマッチする
・レスポンシブ対応
・そんなに高くない
Ultra Rocket Manが気に入った。
といった理由から、MinimalWPを選定しました。

テーマの有効化

初めて自分が書いたテーマじゃないものを使ってみましたが、これめっちゃ簡単なんですねw 知りませんでした。

テーマを買うとzipがDLできて、それをパコーンとWPの管理画面からアップロードして有効化するだけでスーパー簡単にテーマの切り替えができました。

ただ、このままだとデフォルトのサイト名の画像や、スライド写真があたってるのでMinimalWPのマニュアルにそって変更しました。
これもWPの管理画面から。びっくりするぐらい簡単で良かったです。

自分でカスタマイズしてみる

自分の場合は画像の差し替えと、アイキャッチを使ってなかったので新規でプラグイン一個入れただけですんなりと移行は完了したのですが、細かな点をカスタマイズしていきました

① TOPページが表示されてる時のRecentEntriesを消す

サイトのTOPページが表示されると、最新の投稿がメインのカラムにずらずら並ぶ仕様にしてるんですがUltraRocketManの場合、サイドバーにも最新記事5件がアイキャッチ付きで表示されるのでかぶります。そのため、サイトTOPだけサイドバーの最新部分をはずすようにしました。

変更はかなり簡単で、「テーマ編集」>「サイドバー」を選んで 最新記事とコメントが書かれてる前後のdiv要素を以下のPHPで囲むだけです。

<?php if ( !is_home() && !is_front_page() ) : ?>
  ここに最近の投稿の要素がかかれてる
<?php endif; ?>

これでサイトTOPでも最新記事がメインカラムとサイドバーの2箇所に表示されないようにできました。

② スマホサイズになった時にサイドバーを隠す

サイドバー隠すんだったらレスポンシブの意味なくね? って今書いててふと頭をよぎりましたが、フッターの3カラム構造もちゃんと縦長になるので意味ありましたw


HolePage 20140208

とりあえずやりたい事は、自分の場合サイドバーの中身とフッターの中身がほとんど同じなのでスマホで閲覧すると、スクロールしていった際に同じような要素が2回でてくるのを改善するという事です。
特にカテゴリ一覧などは自分のブログの場合数が多いので、スマホでかなり縦長になってしまうので回避するようにしました。

この修正もお馴染み@basara6669大先生に泣きついた所、丁寧に教えて下さいました!
本当にいつもありがとうございますm(__)m

変更点はテーマのstyle.cssの
@media only screen and (max-width: 767px) と、
@media only screen and (min-width: 480px) and (max-width: 767px)
の2つのセクションで消したい要素を display:none にするだけで対応できました。 自分の場合は当初カテゴリーだけ消そうかなって考えてましたが、再度バー全部を隠すように変更しました。(さっき)

③フッターのソーシャルアイコンを変更

Ultra Rocket Manにはフッターに twitter、Facebook、RSSフィードの3つのアイコンが並んでいますが、Facebookページが無いのでまずこれを落としました。

加えて、twitterとRSSフィードのアイコンが普段使ってるMacBookPro Retinaで見ると解像度的な違和感を感じたので無料で落とせるソーシャルアイコンのpngに変更しました。
こんな感じ↓


東京伊勢海老通信

この変更も楽勝です。使いたいアイコン画像をメディアでアップロードして、「テーマ編集」>「フッター」を選択。
TwitterとRSSのアイコンの場所がご丁寧にコメントでかかれているので、imgタグのsrcを今アップロードしたメディアのURLをベタに貼り付けるだけです。

シンプル命なので、UltraRocketManのデフォルトであったようなアイコンで1色に統一したかったのですが、色を挿しても以外といけるテーマかも。。

重要!④ファビコンとかAnalyticsのタグを設置する

これ、テーマ変更して2日くらい経つまで完全に忘れてました!

自分の場合、faviconやAnalyticsは自動で埋め込む仕組みになっていないので、直接ヘッダーに書きます。
結構なにもいじらなくてもすんなりと移行ができちゃうテーマなので見落としてました。。

ヘッダーの修正は、この場合2箇所になりました。
このテーマの場合は、ヘッダーのテンプレートファイルが「ヘッダー」と、「メインインデックスのテンプレート」の2箇所記述するところがありましたので、両方にAnalyticsのタグを仕込んだりしなければならない点に注意です。


テーマの編集 東京伊勢海老通信 WordPress

これを忘れていたので、集計がされてなくてがっつりグラフに陥没を作ってしまいましたw


ユーザー サマリー Google Analytics

まとめ

今回WordPressでblogを書いていて初めてテーマを買ってみましたが、やっぱり素人の自分が作ったテーマと全然違って細かい部分まで美しい!
設置に関しても、WordPressの仕組みを理解してる人であれば全然必要ないかもしれませんが設置の簡単な日本語ドキュメントがサイトに公開されていたので国内のテーマ販売サイトで買うのは安心感があると思いました。

MinimalWPはテーマのカスタマイズも規約的にOKだそうなので、細かい箇所の修正が自由にできて捗ります!

今までアイキャッチを使っていませんでしたが、あると全然見栄えが違いますね! てかもっと早くテーマを変更すれば良かったです。

レスポンシブデザインにするとやっぱりスマホでアクセスした時の読みやすさは段違い! 嬉しい!

今日、めっちゃめちゃ東京では雪が降りましたが(え、なんの話だよ)皆さん無事でしたでしょうか?
こんな日は家でヌクヌクとWordPressでエントリを書いてるのが幸せですね!
おわり

2014-02-09 | Posted in Word Press2 Comments » 


関連記事

コメント2件

 Rika | 2015.04.07 19:48

初めまして。
きたむー様と同じテンプレートを購入したのですが、何度やっても出来ないためご相談させて頂きたく、コメントより突然失礼致します。
もしよろしければ、下記内容について詳しく教えていただけないでしょうか。。。

下記URL:
http://altarf.net/computer/word-press/2373

質問箇所:
【変更点はテーマのstyle.cssの@media only screen and (max-width: 767px) と、@media only screen and (min-width: 480px) and (max-width: 767px)の2つのセクションで消したい要素を display:none にするだけで対応できました。 】

この部分ですが、私自身全く知識がないのものでやってみましたが出来なく、、
他の方法でやってもましたがやはり出来なかったので、困り果てております。。。。
もしよろしければ教えていただけますか。
お忙しい中申し訳ありません、返信お待ちしております。

 altarfの管理人 | 2015.04.09 14:37

始めまして、管理人です!
ご返事遅くなりまして失礼しました!

cssが反映されなくてお困りとの事ですが、実際のサイトは公開されていらっしゃいますでしょうか?
私で解決できるのか未だわかりませんが、実物を見てみないとアドバイスもできないのでもし公開済みでしたらURL等を貼っていただいてもいいですか?

※非公開にしておきたいバージョンでしたらBasic認証(かけれるかわからないですが・・)とかで限定公開してみるというのも手かと。

Comment





Comment



*