「bootstrap」タグアーカイブ
WordPressテーマ:PR Pin
アイキャッチ画像をボードに並べた様なレスポンシブルなテーマ
気になるところがあったので修正。修正した箇所を覚書。
とりあえず prpin は日本語化されていない。本当は日本語化した方が良いけど、今回は力技で行く。
※ でもテーマがアップデートされると同じ事しなきゃいけないんだよな。
| searchform.php | 検索フォームのボタンの”Search”の文字を虫メガネに変える。(要 Bootstrap) |
| <input class=”btn” type=”submit” value=”<?php _e(‘Search’, ‘prpin’); ?>” /> | |
| <button class=”btn” type=”submit”><button class=”btn” type=”submit”><span class=”glyphicon glyphicon-search” aria-hidden=”true”></span></button></button> | header.php | ナビの検索フォームのプレースフォルダを日本語化 |
| placeholder=”<?php _e(‘Search’, ‘prpin’); ?>” → placeholder=”検索” | content.php | Edit の文字を日本語化(今回は右サイドバー使用。使うテンプレに合わせて修正) |
| edit_post_link(__(‘Edit’, ‘prpin’), → edit_post_link(‘編集’, | comments.php | コメントの日本語化 |
| __(“Leave a Reply”,’prpin’) → “コメントを残す” | |
| <?php _e(“Logged in as”,’prpin’); ?> <a href=”<?php echo get_option(‘siteurl’); ?>/wp-admin/profile.php”><?php echo $user_identity; ?> | |
| <a href=”<?php echo get_option(‘siteurl’); ?>/wp-admin/profile.php”><?php echo $user_identity; ?>としてログイン中。 | |
| <?php _e(“Log out”,’prpin’); »?> → “ログアウトしますか ？” | |
| <?php _e(“Your Comment Here…”,’prpin’); ?> → “コメントはここ…” | |
| <?php _e(“Submit Comment”,’prpin’); ?> → “コメントを送信” |
bootstrapっぽくないサイトを作る
bootstrap はレスポンシブルになるなどメリットは多いが、全部 bootstrap っぽくなってしまう問題がある。
そこが良いという人もいれば、そこが嫌だという人もいる。
そこで bootsrap を bootstrap っぽくなくする方法
無料の bootstrap テーマがいくつも配布されているので、そこから気に入ったものを適用する。
いずれも テーマがいくつか用意されている。気に入ったテーマをダウンロードして使う。
# それでも bootstrap くささは拭いきれないかもしれない。 🙁
bootstrap free theme でググると更にたくさん見つかるので、他にも良いのがあったら教えてください。
Syntax Highlighter for WordPress の使い方
Syntax Highlighter とはソースコードを文法にあわせて色分けしてくれるもの。
先ずは、Syntax Highlighter for WordPress プラグインを管理画面からインストールする。
本文中に
[code language=”css”]
あなたのソースコード
[/code]
の様に記述する。
language (または lang) パラメータはコードをどの様にシンタックスハイライトするかを指定する。
サポートされている language は：
actionscript3、bash、clojure、coldfusion、cpp、csharp、css、delphi、erlang、fsharp、diff、groovy、html、javascript、java、javafx、matlab (keywords only)、objc、perl、php、text、powershell、python、r、ruby、scala、sql、vb、xml、
bootstrap で syntaxhighliterがずれる件
bootstrap css を使うと container というクラスが衝突するため。
bootstrap css を読込んだ後ろのどこかに、以下のコードを追記する。
WordPress だけではなく bootstrap × syntaxhighliter ならどこでも起こるね。
|
1 2 3 4 |
/* syntaxhighlihter adjustment */ .syntaxhighlighter .container:before, .syntaxhighlighter .container:after { display: block; } |
wordpress のテーマを bootstrap 3 ベースに変えてみた。
bootstap css は twitter がオープンソース化した css フレームワーク。
css の clase を変えるだけで色々な表現をすることができる。
デバイスに合わせて表示するレスポンシブルデザインにもなる。