ブログのテーマをStinger3にしてみた

すごいという評判を聞いていて、変えられず変えられずにいたままだったのですが、ついにブログのテーマにStinger3テーマを導入してみました。

WordPressテーマのSTINGER3公式サイト

Stinge3にした理由

CSS書いたりJS書いたりするのは好きなのですが、SEOなどはあまり得意ではなく・・。
というこで、SEOに強いといわれているテーマを少しカスタマイズしながらSEOを勉強できないかなと思って導入してみました。

導入するまでにやったこと

導入するまでにやったことですが、ほとんど先ほど紹介した公式サイトにかかれていることをやっただけです。

  • 広告の設定
  • トップ画像の追加
  • オススメのプラグインの追加
  • 少しだけカラーリングの変更

手順が非常に詳しく載っているのでほとんどそのままやれば何も問題はないです。
All in one SEOはno indexのページが出来たりして、SEO的に弱いとあったのですが、このプラグインに自分が依存にしてしまっているところもあるので、これは引き続き使うことにしました。

少しだけカラーリングの変更

まんまデフォルトのままだとちょっと味気ないですし、芸も無いので少しだけ変えました。
Stinge3にある、style.cssがPC版のCSSでsmart.cssがスマホ用のcssになっています。
なので、両方を変えないとデザインが統一出来ません。

タイトルの変更

タイトルがデフォルトのままだと黒いので色を変えました。
smart.cssでは681行目あがりに、style.cssでは237行目くらいにあります。

[css]
#container #header #header-in #h-l .sitename a {
color: #0099cc;
text-decoration: none;
font-weight: bold;
}
[/css]

「もっと見る」のカラーリングを変更

この部分もグレー時に黒い文字なので、青背景に白文字にしました。smart.cssはだいたい550行目にあり、style.cssは842行名あたりにあります。
「motto a」で検索すればすぐ出てきます。

[css]
.motto a {
color: #FFF;
text-decoration: none;
background-color: #0099cc;//変更
padding: 5px;
/* color: #666;*/
color: #fff;//さらに上書き
text-align: center;
margin-top: 10px;
display: block;
}
[/css]

まとめ

ほんとにPVが上がるかはまだわかりませんが、ぱっと見ただけでも、色々なところが考えられているテーマだなというのは感じました!
あまり時間がなかったので、最小限のカスタマイズですが、もう少しちゃんといじってみたいと思います。
ではでは

wordPress3.7の新機能をまとめてみた

wordPressの3.7.1までがいつのまにか出ていて、そろそろアップデートしても大丈夫かなと思っているbasara669です。

アップデートする前にwordPressの3.7はどの辺りがパワーアップしているかまとめてみました。

結局書いていたら開発者目線の内容になってしまった・・。。

WordPress3.7の主な新機能

それでは主な機能を見ていきます。

自動更新機能

WP_Automatic_Updaterクラスが出て、プラグインやThemeが自動的にアップデート出来るようになりました。(マイナーアップデートのみ)
開発側は最新版を使ってほしいと思っていますし、WordPressのユーザーもいちいちアップデートするのは煩わしいと思うので、概ね良い機能です。
ChromeやiOSのアプリだってどんどん自動でアップデートされている時代なので、ユーザーもそれほど違和感ないかなと思います。

概ねといったのはアップデートした際に不具合が起こる可能性だってあるということです。
これまで以上にプラグインなどを津kルウ祭には気をつけて作らないと行けないですね。

パスワード性能の向上

パスワードをつける際にこれまでもWordPressはチェックしてきましたが、それを更に向上させてます。

検索機能の向上

これまでのWordPressの検索機能はそれほどよくなかったのですが、今回のバージョンから向上しました。
ただ、キーワードが合っているかを調べるだけでなく、タイトルから調べていってよりマッチしやすい結果を返してくれるようになっています。
詳しく知りたい方はこちら↓

#7394 (Search: order results by relevance) – WordPress Trac

language packsを使ったグローバルサポート

新しいlanguage packsがアップデートされているので、themaやプラグインなどでも使えるようになりました。
言語ファイルが別のファイルで管理されることで、素早く更新できるようになっているようです。
もちろんこれは自動更新に対応してるので、ユーザーに負担をかけること無く提供出来ます。

それ以外のマイナーなアップデート

細かいアップデートを紹介します。

DATE QUERIES

WP_Queryのdate queriesが性能向上してます。
ここらへんはCODEXをみてもらうのが良いです。

Class Reference/WP Query « WordPress Codex

アクセシビリティ

リストをキーボードから操作可能になっていたり、管理画面の投稿機能がより使いやすくなっているようです。

マルチサイト

get_blog_listなどより使いやすい、wp_get_sitesなどが出て、よりマルチサイトが作りやすくなっています。

新しいビルドツール

開発者しか関係ないですが、新しいビルドツールが出ているようです。
僕もまだチェック出来てないですが、今度チェックしてみよう。。

WordPress › A New Frontier for Core Development « Make WordPress Core

まとめ

大きなアップデートは自動アップデート機能でしょうね〜。
自動的にバージョンアップされて、うわ!なんか変!ってならないように、これからはよりバックアップが重要になるな〜。
3.7.1も出たし僕もアップデートするかな!w
ではでは

wordpressのRSSフィードのタイトルが2重になるのを解決する方法

右ナビにfeedlyのアイコンをつけたんですけど、その際にRSSフィードのタイトルが2重になっていてこれを解決した方法を書きます。

wordpressの通常のフィード

wordpressで実装されているフィードはこんな感じです。

  • http://example.com/feed/
  • http://example.com/feed/rss/
  • http://example.com/feed/rss2/
  • http://example.com/feed/rdf/
  • http://example.com/feed/atom/

通常は下記を使えば問題無いと思います。

http://example.com/?feed=rss2

詳しくは↓

WordPress Feeds « WordPress Codex

しかし、問題発生

通常であれば、先ほどのfeedを登録すれば良いのですが、なぜか2重になっちゃってます。。

rssのtitleを見てもしっかり2重になってしまっています。
ソースを見ると、rss2はこんな感じになってます。

[php title=”wp-content/wp-include/feed-rss2.php”]
<channel>
<title><?php bloginfo_rss(‘name’); wp_title_rss(); ?></title>
<atom:link href="<?php self_link(); ?>" rel="self" type="application/rss+xml" />
[/php]

たぶんbloginfo_rss(‘name’);と wp_title_rss(); の両方が出力されてしまっているために発生しているんだと思います。
このwp_title_rss();を外せば、いけるんだと思うんですが・・。

あんまりソースはいじりたくない!!ということでこの方法はやめましたw

FeedBurnerを使ってみた

他の方法が無いかなと思ったらcodexにFeedBurnerを使った方法がのっていました。

WordPress › Support » Double titles in RSS feed. HELP!!!

早速やってみた

まずはサイトにアクセスします

http://feedburner.google.com/

ブログのURLを入れ

ブログ情報を入力していけば簡単につくれます。

登録が完了するとフィードを管理するページがあるので、optimizeタブを選択します。

次に左ナビから「Title/Description Burner」を選択し、そのページにあるtitleのフォームに表示させたい内容を入力します。

その後、自分のフィードをコピーしてfeedlyのバナーを作ります。feedburnerのURLは通常こんな感じです。

http://feeds.feedburner.com/basara669com

feedlyButtonの作り方

ここについてはものすごいたくさんの記事があるので、検索してもらえばすぐ出てくると思います。
ザーッと流れだけ記載しますと下記にアクセスして、

feedly. your news. delivered.

ページ内にある「Step 2: Insert your feed URL」のフォームに先ほどのfeedburnerで生成したフィードのURLを入力し、専用のタグを作ってもらい、それをブログに貼り付けるだけです。

まとめ

wp-include内をいじくるのは勇気がいるので、そういうところをさわりたくないという方であれば、この方法が良いかと思います。
ただ、後から調べてわかったのですが、feedburnerというサービスってもしかしたら終わるかも!って話なんですね!(ノ∀`)アチャー
もっと別の方法を見つけないといけないかもな〜

ではでは

wordpressの初期テーマの2014年バージョンTwenty Fourteen がすごいことになっているので歴史を辿ってみた!

wordpressのデフォルトのテーマはとても良く出来ていて、あのシリーズは結構wordpressのテーマを作る上で参考になることがいっぱいなのですが、そのデフォルトテーマの2014年バージョンがリリースされました。

Twenty Fourteen | A beautiful magazine theme

変わりすぎww
これまでのテーマと比べてみると色々面白かったので、比較しながら歴史を辿ってみました。

Twenty Ten:まだレスポンシブじゃない!

Twenty Ten | The 2010 theme for WordPress is stylish, customizable, simple, and readable.

大きな特徴

まず思ったのがグラデーションや角丸が無いです!
まだchromeの普及率が低かったのかな。
それかデザインを見せるっていうよりは、wordpressとしてどういうことが出来るかを見せるデザインだったのかもしれないです。
後、特徴的なところはレスポンシブではないところですね。

不思議なのはフラットデザインが流行っている今見るとむしろオシャレっていうねww

細かいUIなど

検索ボックスがそれほどこっていなかったり、文字が小さかったり

スクリーンショット 2013 08 22 21 44 57

基本的にはフラットなUI

スクリーンショット 2013 08 22 21 44 49

Twenty eleven:レスポンシブ化!

Twenty Eleven | The 2011 theme for WordPress is sophisticated, lightweight, and adaptable

大きな特徴

これぞwordPressというイメージのテンプレートですね。
すでにこの時点でレスポンシブしてますねw
当時はそんなに意識してなかったかもな〜。

UIはグラデーションが使われるようになりましたね。
ここらへんのグラデーション具合はiOSっぽいですよね。

スクリーンショット 2013 08 23 20 04 30

検索ボックスにも角丸使われるようになったり、インタラクションが出始めました。

スクリーンショット 2013 08 23 20 04 19

Twenty Twelve:ブログ以外の利用方法を意識!?

Twenty Twelve | Your favorite WordPress theme, updated and polished for 2012.

一気にシンプルになりましたね!
ここから管理画面のカスタマイズ性が一気に上がったイメージがありました。
また、デフォルトのページがブログ形式ではなくなったのが、特徴的かなと思おいました。
たぶん通常のコーポレートサイトなどでも使われるようになったからですかね。
また、カスタマイズ出来るところを増やすためか、よりシンプルになっていますね

なんか白いイメージ

スクリーンショット 2013 08 23 20 19 05

最小限の表現しかなく、本当にテンプレートというイメージになりました。

スクリーンショット 2013 08 23 20 19 19

スマホサイズにするとメニューがダサいですw

スクリーンショット 2013 08 23 20 28 24

Twenty Thirteen:いきなり派手に!

Twenty Thirteen | The Future Is Fantastic!

これまでの白路線というか、テンプレート路線からいきなり変わりましたw
カラムもシングルカラムにして、より今っぽいサイトになった感じでしょうか?
トップの画像がwidth100%で表示されるようになったのも特徴的ですね。
スタートアップ系のサイトのトップはこういった画像の使い方が増えた気がしました。
後タブレットなどで使った時に

検索ボックスにピクトグラムっぽいアイコンが使われるようになっています
インタラクションも戻ってきました。

スクリーンショット 2013 08 23 20 25 02

width100%で自分たちのイメージを伝える。
こういったUIは確かに多く見受けられますね。

スクリーンショット 2013 08 23 20 24 26

Menuは大きく変わりました色が派手になっただけでなく、paddingが大きく取られるようになっています。
これはきっとタブレットなどで触った時にPC用のページでも触りやすいとかを意識しているんでしょうかね〜。

スクリーンショット 2013 08 23 20 24 22

スマホサイズの画面サイズにしてもメニューがカッコ良いです。

スクリーンショット 2013 08 23 20 28 38

Twenty Fourteen :さらに複雑なUIに

Twenty Fourteen | A beautiful magazine theme

これまでのwordpressのデフォルトのテーマは基本的にはブログのテンプレートやサイトのテンプレートになるものが意識されていたと思います。
それがこの変化!
ヘッダーの部分には、記事がタイル型に並べられ、雑誌のようになっています。

スクリーンショット 2013 08 23 20 37 26

よりフラットなデザインをしていますね。

スクリーンショット 2013 08 23 20 35 39

ヘッダーは固定化

スクリーンショット 2013 08 23 20 38 21

breakPointは4つ!
3カラム

スクリーンショット 2013 08 23 20 38 50

2カラム

スクリーンショット 2013 08 23 20 39 07

1カラム

スクリーンショット 2013 08 23 20 39 40

2012年までのUIまではCMSのテンプレートという感じだったのですが、2013年あたりから個性を出し過ぎな気がしますw
そもそもデフォルトでは入ってないテーマになっているので、コンセプトが少し変わったのかな〜。
とりあえずものすごい変わりましたw
個人的にはちょっと派手すぎて読むという行為が阻害される気がします(^_^;)
少し目指すポイントが変わったのかもしれません。

ただ、デザイン面から言えば明らかにモバイルファーストになったと思います。
モバイルで最適になるように考え、それに合わせてPCを変化させている様にきがします。

個人的には面白かったけど、すごい趣味投稿になってしまったなw

ではでは

wordpressアップグレード時に「接続情報」が出てしまった時の対処方法

色々忙しくてなかなかブログが更新できなかったのですが、久しぶりにwordpressの管理画面を開いたら、wordpress 3.5.2がリリースされてるじゃないですか!!

というわけで早速アップデート!

と思ったら、何やら、見たことない画面が・・・。

自動更新が動かなくなっている・・。

自動更新をオンにするための方法

色々調べてみると自動更新をONにするための方法は色々あるようです。

  1. apacheに権限を与える方法
  2. wp-config.phpに追記する方法
  3. functions.phpに追記する方法

apacheに権限を与える方法

apacheに権限を与える方法はなんとなくセキュリティ的に怖いような・・・。
失敗した時に色々消されてしまったり、何かすると大変なことになってしまうんじゃないかと思って却下しました。
※後、そもそもapacheに関する知識も少ないですし、黒い画面が苦手なため

wp-config.phpに追記する方法

次にwp-config.phpに追記する方法なんですが、これがとても簡単で以下を追記するだけのようです。

[javascript]
define(‘FS_METHOD’,’direct’);
[/javascript]

これはとても簡単なのですが、wp-config.phpって色々なところに影響があるので、これもやめました。

functions.phpに追記する方法

最後のfunctions.phpに追記する方法なのですが、basara669はこれを使いました。

やり方は、使っているテーマのfunctions.phpに書きを追記します。

[javascript]
function set_fs_method($args) {
return ‘direct’;
}
add_filter(‘filesystem_method’,’set_fs_method’);
[/javascript]

やっていることはフィルターフックを使って2番めのやつを行なっているだけですね。
なぜ、これを選んだかというと、functions.phpだったら、切り戻しが楽だった気がしたからですw
functions.phpの最後の追記しました。

まとめ

そもそもなんでこの状況がいきなり起き方の検証をするべきなのですが、全然出来てません・・。
それでいいのか・・。
根本的な原因を解決出来ず、乗り切ってしまったって感じです。
後々、何か問題が起きてしまうかな・・。
不安だな・・。

ただ、とりあえず自動更新は出来るようになります!
自動更新ができなくなってお困りの方はぜひぜひ試して下さい!

ではでは

Scroll to top