WordPressの新しいデフォルトのテーマ “Twenty Eleven” がHTML5に対応しているというので気になっていた。最近よく目にするHTML5ってHTMLやXHTMLとどこが違うんだろう?と興味もあったので早速テーマを変えてみた。
しかし、前のテーマ(Kubrick)よりもヘッダー画像も文字もすごく大きくなっていてびっくり。
いろいろカスタマイズしたくなり、特にエントリーのページ(single.php)と固定ページ(page.php)をどうしても2カラムにしたくて下手にいじっていたら管理画面が真っ白に…
“Twenty Eleven”のテーマをここからダウンロードして、Fetchでブログのサーバーに上書きアップロードして復活できたけど、怖かった〜。
このページのTwenty Elevenの子テーマを入れてみたりもしたけれど、子テーマを使っていると使っているプラグインが無効になったりするのでやっぱり直接Twenty Elevenのファイルをいじることにした。
バックアップや編集がしやすくなるかな?と思って、念のため、デフォルトのCSSのいちばん下に断り書きをつけて書き足すようにしている。テーマのアップデートの時には上書きされてしまうので気をつけなきゃ。
いろいろ試したけれど、結局プラグイン Twenty Eleven Theme Extentions を使ってエントリーページ(single.php)と固定ページ(page.php)を2カラムにした。
iPhoneで見た時に右にスペースができてサイドバーが回り込んでしまっているのとブログタイトルを消したらメニューに勝手に入った検索枠(色も勝手に濃くなった)がヘンな場所に表示されてしまうのが気になる。まだ未解決のままだけど、まぁそのうち直せたらいいな。iPhone向けのページを作ればいいんだろうけど…。
というワケで、カスタマイズのメモ。
一応本業はピアノ弾きなのでてきと〜でごめんなさい。
コメント・アドバイス等いただけたらとてもうれしいです。
- ヘッダー画像上の余白が気になったのでカット。ブログタイトルを消さずに画像にのせたかったのだけど、iPhoneでの表示がグチャグチャで手に負えなくなったため、諦めてヘッダーの設定でタイトルを非表示にして画像そのものにタイトルを入れてお茶を濁した。
- style.cssでフォントの大きさや画像の枠などをカスタマイズ。
- macがフランス語ベースのせいかWordpressもフランス語なのだが、デフォルトだとフランス語になっていない部分が結構あってヘンだったので
wp-concent/themes/twenty-eleven/languages/ にフランス語のファイルを追加。
(ダウンロードのアドレス) - 日本語表記もできる範囲で入れてみたけど未解決。
- サイドバーのウィジェットの・を消してfont-weightをノーマルに変更。
1 2 3 4 5 6 7 8 |
/* widget li カスタマイズ */ .widget ul li, .widget a, .widget_twitter li { display:block; list-style-type:none; /* IE対策 */ font-weight:normal; } |
- エントリー(single.php)と固定ページ(page.php)にGoogle Plus OneやTwitter、Facebookの “Like & Send” ボタンを追加。(追記: はてなブックマークのボタンも追加)
横一列に並べるのに苦労したけど、このページを参考にしてやってみたら並んだ。
まずstyle.cssのいちばん下に追加:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/* socialbutton */ ul.socialbutton { padding: 0px; margin: 0px; list-style-position: outside; /* ボタンの位置を左に寄せる */ } ul.socialbutton li { float: left; width: 95px; /*としておいてcontent-single.phpのliタグでボタンごとに広さを調整*/ margin-right: 5px; display:block; list-style-type:none; } |
content-single.phpの中の
1 2 3 |
<div class="entry-content"> <?php the_content(); ?> <?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'twentyeleven' ) . '</span>', 'after' => '</div>' ) ); ?> |
の下にこんな感じでそれぞれのボタンのコードを並べる。
1 2 3 4 5 6 7 8 |
<div style="margin-top: 20px;"> <ul class="socialbutton"> <li style="width:60px;"><g:plusone size="medium"></g:plusone></li> <li style="width:50px;"><a href="https://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="https://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script></li> <li><?php echo tweet_button(); ?></li> <li style="width:120px;"><div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#appId=232897800090315&xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <div class="fb-like" data-send="true" data-layout="button_count" data-width="120" data-show-faces="false" data-font="lucida grande"></div></li> </ul> </div> |
FacebookのLike(=いいね!)ボタン(HTML5やxfbmlでチェックを入れればSendボタンもつけられる)のコードはここで必要なデータを入力すると入手できる。同じページでゲットできるOpen Graph Tagのコードをheader.phpに入れるのも忘れずに。
その際FacebookのアプリケーションIDを取らなければいけない。
アプリケーションIDの取得方法についてはこのページへ。
FacebookのLikeやSendボタンを押した時にときどき不具合があったけど、サーバーのせい?
Firefoxだと “Send” で表示される固定ページの情報やエントリーのアドレスがindexのものになったりする。でもSafariやChromeでは動作するみたいなのでまぁいい事にしよう、、、
気にしだしたら絶対ハマって時間を費やすことになりそうだし。
あくまでも一応本業はピアノ弾きなので(^_^;)
かっこいい!
昔からよくブログはいじってるよね。
自分で作るのは無理なのでできあいのモノを恐る恐るいじってる(笑)
そういえばiBlogの時代も知ってるんだよね〜