Simplicityをバージョンアップしました。
今回は、機能追加もありますが、不具合箇所の修正と、よりカスタマイズがしやすいよう、というか自分が今後も手軽にバージョンアップできるように、コード・ファイル名などを整理整頓しました。
- 本文記事冒頭抜粋（記事一覧のスニペット部分）の文末に末尾文字を設定できるように機能追加（要望）
- ブログカードの横幅をカラム幅いっぱいにできる機能を追加
- デフォルトのFacebookシェアボタンが子テーマを適用するとずれる不具合修正
- 320px幅のスマホでも「320×100のラージモバイルバナー」広告を端末幅からはみ出さないように修正
- AutoptimizeプラグインでJavaScriptを圧縮するとスクリプトエラーが出る不具合修正
- シェア数を取得するjavascript.jsにある関数を大幅に書き換え（参考）
- header-javascript.phpテンプレート追加（ヘッダーのJavaScript記述まとめ）
- header-css.phpテンプレート追加（ヘッダーのCSS記述まとめ）
- ogp.php→header-ogp.phpに変更（ヘッダー用テンプレートと分りやすくするため）
- twitter-card.php→header-twitter-card.phpに変更（上に同じ）
- ulリスト先頭のポイントを元に戻した
- CSS微調整（シェアボタンアイコンの調整とか）
記事一覧の抜粋に末尾文字をつけられる機能
「外観→カスタマイズ→レイアウトの設定」に「抜粋の末尾文字」機能を追加しました。
これは、抜粋文字数内では収まりきらなかった文字の末尾に「…」などを付加できる機能です。
抜粋文字数よりも文字数が少ない記事の場合や、moreタグがきちんと挿入されていて、綺麗に区切れているところでは表示されません。
要望では、最初、動作がうまくいかなかったので、一旦実装は諦めたのですが、1日寝た後に書いたら、うまくいったので追加。
ブログカードの横幅を広げる機能
「外観→カスタマイズ→レイアウトの設定」に「カード幅を広げる」機能を追加しました。
本来はこんな感じだったカードが
このくらいまで広くなります。
Facebookシェアボタのずれ修正
デフォルトのタイトル下にあるFacebookシェアボタンのズレを修正しました。
以前から、他の方のSimplicityサイトを見ていてズレているのには気づいていたんですが、僕の開発環境で再現できなかったので、修正できていませんでした。けど、今日ようやく原因がわかりました。
僕の環境では、こんなだったのが
他のサイトではこんな感じでずれている。
原因は、親テーマだけだとずれないのに、子テーマを適用するとずれるというものでした。
僕も、なぜそうなるのか訳のわからないんですけど、余分な行動すべて省いた子テーマを適用してもずれるので、こちらで配布している子テーマに原因があるわけでもないようです。訳がわからないです。
結局、親テーマ、子テーマどちらを適用してもズレないスタイル（多分）に変更しました。
iPhoneで見てもラージモバイルバナーがはみ出さないようにスタイル変更
幅が320pxのモバイル端末でラージモバイルバナーがはみ出さないように修正しました。
こんな感じで左右ピッタリ表示されるようになります。
JavaScriptのシェア数取得関数を大幅書き換え
javascript.jsの中身を大幅に書き換えました。
書き換えたと言っても、僕が書いたのではなく、blazechariotのHidekichiさんのサイトに掲載されているコードを、許可をいただいて使わせてもらいました。ありがとうございます。
ファイル構成変更
今回、header.php内が雑多になってきたので、CSS関係のコードを書くにはheader-css.phpに、JavaScript関係のことを書くには、header-javascript.phpにとコードを整理整頓しました。
これで次から、どこに何があるか少しは分かりやすくなりました。（僕が）
あとついでに、ヘッダー内で使用されるファイルは、頭にheader-がつくように統一しました。
- ogp.php→header-ogp.phpに変更
- twitter-card.php→header-twitter-card.phpに変更
これで、ファイラーでファイルリストを名前でソートして表示すると、まとまって表示されるので編集効率が多少上がります。
v1.2.9あとがき
今回、結構コードを書き換えたので、不具合がありましたら報告していただけると助かります。
でも書き換えたおかげで、コードがかなりスッキリして嬉しいです。
コメント
子テーマを適用している状態で、新しいバージョンのSimplicityを入れました。
SNSボタンの表示がデフォルトに戻っていたのでちょっと見てみた所、
#sns-group-top .facebook-btn{
width:110px;
margin-top:-2px; //←追加で直りそうな予感
}
こんな感じで真ん中辺りに揃うと思います。親テーマ/css/sns.css該当箇所
chromeのF12で見てみたらmargin-topが-7pxになってました。
もし仮にズレてない人が-2pxを入れたら、それのせいでズレるかも知れません。
既にズレている人は上記でイケるだろうと思います(要微調整。
僕の環境だけなのかもしれないんですけど、margin-top:-2px;にすると、親テーマのみにしたとき、今度は下がって表示されてしまいます。なんでかはわからないんですけど。
なので、今回の1.2.9でmargin-topで調整するのはやめて、邪道なのかもしれないですけど、以下のようにしたら僕の環境では、親テーマ、子テーマ適用後も、どちらもずれなくなりました。
#sns-group-top ul { line-height: 20px; }でも、もしかしたら他の人の環境では、ずれているのかもしれません。
やっぱりまだ1.2.9でもずれていますか？
今回のアップデートで設定を戻す時にデフォルトのを見て、あ、ズレてると気がついた次第ですが、その段階では先にコメントした感じで直ったように思います。調整したはずの子テーマを適用させると今度は独自ボタンのFontAwesome部分がやや下にズレているように思いました(現在もそのままです。
実際にcssを書き変えて試してみたわけではないので確かではありませんが、逆にline-heightが一番怪しいと思ったりもしています。
先日コメントさせていただいたFontAwesomeのズレの件でお話させていただいたようにrelativeにした要素のtop50%でtransformの-50%は必ず要素の縦ど真ん中に入ります。これでもズレることがあれば、それを囲むmargin・paddingの設定やheightが正しく設定できていないのではないかと想像します。
margin・paddingらの設定が正しいとすれば、目に見えずわかりにくいline-heightはとても怪しいです(ΦωΦ)
一度ボタン周りのclassすべてのline-heightをコメントアウトして、.articleのline-heightだけ残している状態から順番に調整してみてはどうでしょうか？
fontAwesome同等ぐらいの手頃な画像アイコンで背景透明化した極小さなアイコンをデータURLスキームにしてbackground-image,positionあたりでcenter,centerにする方法もありますけども作るのが面倒ですしね(ΦωΦ)
これだとhttpリクエストが減るので極わずかながら速度に貢献できるかも知れません。これをcssスプライトと併用すれば・・・。アイデアの一つとして。
ついでに ウェブページを1秒台で表示させる原理と方法 ここは時間がある時にご覧になって下さい。ためになる内容です。
一応先日も、やってみたんですけど、今の設定の方が自分の好みだったもので1.2.9のようにしました。
一応、いろいろなWindowsのブラウザ（他のOSは体の都合上使えなくて）で、確認してみたんですけど、今の設定でそこまでズレているようには見えないんです。
もちろん、top50%でtransformの-50%の方法も試してみた上でです。
僕の環境で見たら、ずれているようには見えなくて、
現環境では、今の設定が好みだったというそれだけなんです。
ただこれは、完全に好みの問題なので、ここらへんは、個人で調節してもらうしかないかもしれません。
リンク先、ものすごく勉強になります。ありがとうございます！
ただ、もちろん高速化も大事なんですけど、やるとしても一番最後になると思います。
今は、できることはやっていくつもりですが、まだバージョンアップをしているうちは編集のしやすさを優先させようと思っています。
今のところ、プラグインに任せられるところは、任せたいと思います。
僕は、このSimplicity製作を本業にしているわけではないので、今の自分の空いている時間以上の高クオリティーなものは出来ないことをご了承ください。
お世話になります。Simplicityを使用させて頂いている者です。素晴らしいテーマをありがとうございます。
さて、今回アップデートされました新しいSimplicity1.2.9ですが、こちらのテーマ（親）を設定したところ、スマフォ（iphone）でみると、なぜかPC版が表示されてしまいます。（キャッシュ等も消してみましたが、変わりませんでした）設定はALLデフォルトです。
Simplicity20141102ではこのような不具合は発生しませんでした。ご教授頂けましたら幸いです。宜しくお願い申し上げます。
このページをスマホで見ても、PC版が表示されますでしょうか？
あと、一応もう一度以下の部分は確認してみてください。
・レイアウトの設定で「完全レスポンシブ」にチェックがついていないかどうか
・キャシュプラグインはアンインストールされているかどうか
・キャシュプラグインが作成したキャッシュファイルは完全に削除されているかどうか
わいひら様
ご返信遅くなり、申し訳ありませんでした。ご教授の通り、キャッシュを消したり、プラグインを停止したりしてみまして、きちんスマフォ版が表示されていることを確認しました。
こちらのミスもあり、ご迷惑をお掛けしました。大変失礼いたしました。ありがとうございました。今後ともよろしくお願いいたします。
いえいえ。報告ありがとうございます。
不具合じゃなくて安心しました。また、何かありましたらよろしくお願いします。
お世話になっています。シンプルで素晴らしいテーマをありがとうございます。
Simplicity1.2.9ですが、適用したときにトップに表示するバナー(728×90)が左寄りに少しずれる現象がおきました。「hemes/simplicity/style.css」にある「ad-space-top」のクラスで指定されている「margin-left:-10px;」が原因のようです。
子テーマのCSSファイルでスタイルを「margin-left:0;」にして上書きしてすると回避できました。私の環境だけかもしれませんが、ご報告いたします。
不具合報告ありがとうございます！
広告の位置は、僕がCSSの設定をミスっていたみたいです。
1.2.10で修正しておきました。
http://wp-simplicity.com/simplicity1-2-10/
[…] 画像などと一緒にCSSやHTML、javascriptあたりもキャッシュされます。Simplicityでも1.2.9公開時に、「AutoptimizeプラグインでJavaScriptを圧縮するとスクリプトエラーが出る不具合修正」と言う内 […]