Underscores で魔改造したメモその3。
Sass版のBootstrapをBowerでインストールして部分的にimportして使ってみる。
- Compass導入編
- ナビゲーションメニュー改造編
- Bootstrap(Sass)導入編 ←今ここ
Bootstrapはデザインが出来なくても眉目麗しいスタイルになる上に、
あるあるなUIのJavascriptまでついてくるのがいい所だと思う。
しかも以前はLessのしかなかったけど今はSassのもあるんだ。
気ままに綴る独学メモ帳
wordpressに関すること
Underscores で魔改造したメモその3。
Sass版のBootstrapをBowerでインストールして部分的にimportして使ってみる。
Bootstrapはデザインが出来なくても眉目麗しいスタイルになる上に、
あるあるなUIのJavascriptまでついてくるのがいい所だと思う。
しかも以前はLessのしかなかったけど今はSassのもあるんだ。
数年ぶりにWordpressのカスタムテーマを作る事になったので、
Underscores をベースにやっつけてみた。
Underscoresはフルカスタムしたいユーザー向けのスターターテーマで、Automatticが作ってるから超安心して使える。
必要環境とインストールについては公式リポジトリのREADMEを参照頂くとして、
こちらではインストール完了後にした魔改造について適当にメモっていくつもりです。
長くなりそうなので改造個所毎に記事分けます。
「WordPressで投稿した記事に別途期限日を設定して、その期限日までのカウントダウンタイマーを表示したい」ってな用途に。
晒してるソースはMooToolだけどロジック応用すれば他のフレームワークでも出来るんじゃないかな。
期限日つきの記事を投稿するカテゴリーを作る。サンプルでは「未分類」の名前を変更してNewsカテゴリとして使用。
投稿サムネイルと共に「○○まであと■■日▲▲時間★★分◆◆秒」と表示する。
時間はJavaScriptでリアルタイムにカウントダウンさせる。
更新されない可能性を考慮して、設定期限を過ぎた場合は過去形にしておくことにした。(javascriptで)
期限越えたとき表示する文字列の設定も出来るようにしておく。
以前書いた画像サムネイルを投稿された記事へのリンク付きで表示はギャラリーにある画像を表示するものなのだけど、
Wordpress2.9には投稿サムネイルっていう便利機能が備わっているんだよね。
そろそろ投稿サムネイル使う関数に書き直さねば…と思っていたらフォーラムにそんな感じの質問が投稿されていたのでw さらっと書いてみた。
関数はループ外の使用が有効なので、トップに更新情報を出すもよし、サイドバーに表示するもよしです。
仕様上リスト要素しか出力されないんで、タイトルとか適当につけてください。
<h3>新着記事</h3> <div id="newposts"> <?php postthumb_ancherlinks('category=16,15');?> </div>
デフォルトテーマに書いた超適当なソースだけど以下ポイント。
画像がない場合はnoimageというクラスがli要素に付くので、[No Image]画像を背景として指定。
サムネイルのサイズと同じpaddingとwidthを指定して整える。
サムネイルとタイトルの間には改行が入らないので、サムネイルかタイトルをブロック要素にして改行。
#newposts ul { padding:0; } #newposts li { list-style:none outside; padding:0; display:inline-block; text-align:center; } #newposts li img { display:block; } #newposts li.noimage { background:url(images/noimage.png) no-repeat top center; padding-top:100px; width:100px; }
配布されたテーマをアクティブにしたことがありますか?もしあるなら既に悪意あるコードが仕込まれているかもしれませんよ。
2chのWordPress (ワードプレス) その15 >>806 より
テーマの安全性のチェックとかってみなさんどうしてますか?
WPとテーマをいくつかいれてから、システム情報みてみたらメールキューがたまってた。
あれ?と思ってキューにたまってるメールみてみたら上記アドレスあてにブログのアドレスを送ろうとしてました。
OB25通る設定してないのでひっかかってたから助かりました。送ってるファイルの正体はSimple Perfectというテーマのfunction.phpです。
http://kachibito.net/wordpress/free-high-quality-themes.htmlで紹介されてました。
該当アドレスが分割して組み込まれてました。送ろうとしていた情報はの一部は↓です。
457 >——-$sq1=”SELECT DISTINCT ID, post_title, post_content, post_password,
comment_ID, comment_post_ID, comment_author, comment_date_gmt, comment_approved, comment_type,WordPress公式の配布サイトからだとこういうのはないんですかね。
私は質問先の【PHP】下らねぇ質問はID出して書き込みやがれ 95を見ていて知ったんだけど、
どうも日本ではまだマイナーなワームなようなので注意喚起ついでに晒してみようと思います。
結論を書きますと、自作でないテーマを1度でもアクティブにした事がある方は、今すぐに怪しいコードがfunctions.phpに仕込まれていないかチェックした方がいいということです。
WordPressに新しく実装された投稿サムネイル用のタグthe_post_thumbnail()は出力されるのが画像だけなんだけど、
これにページへのリンクとか拡大画像とかのリンクをつけたいと思うことがあったので関数作った。
構文:
the_linked_post_thumbnail($size = 'medium', $linkto = 'image', $attr = NULL)
$size
画像のサイズ。文字列(thumbnail, medium, large, full)か配列( array(32,32) )で。
$linkto
リンク先。image=フルサイズの画像url、page=投稿記事、NULL=リンクしない
$attr
画像の属性。連想配列形式で指定する
$default_attr = array( 'class' => "zoom", 'title' => 'クリックで拡大', );
WordPressに標準搭載されているGalleryショートコードでは、
HTMLエディタの時は[gallery]なんだけど、ビジュアルエディタにした時には画像が表示されるようになっている。
ギャラリーに限らずとも、この置換が再現出来れば自作したショートコードの見やすさが段違い。
で、実際やってみたら今まで記事に書いた事の範囲でさっくり出来てしまったので、
アクティブテーマディレクトリ下にあるイメージディレクトリのURLを出力するショートコードを例にして、方法を書いてみます。
2019年時点ではこのコード動かないので、TinyMCE(v5)バージョンも書きました
ページタイトルとかパンくずナビとかがリンクしてないのが気持ち悪かったので、
WordPressのタイトル周りの統一感を出す関数を作ってみたYO。
タイトルだと「ページタイトル » カテゴリー等 | サイト名」 になり、
パンくずでは「ホーム > カテゴリー等 > ページタイトル」になる。記号はお好みで変更可。
$localから始まるグローバル変数はテンプレートページ内のどこでも使用出来る。
各記事ごとにマップを埋め込むのはプラグイン使えばいいんだけど、
地図のポイントと記事を連動させる必要がない場合もあるし、
WordPressのページ機能で作成されたページ(例えば会社概要だとか)にだけ埋め込みたいとか、
地図に表示するマーカーが複数あるとか、タブで表示する情報を自由に制御したい…なんてケースもあるわけで。
プラグイン使うほどでもないならショートコード自作して埋め込めばいいじゃないか! 😀 という記事です
以前書いた記事 [WP]画像サムネイルを投稿された記事へのリンク付きで表示 の応用編です。
ページテンプレートをちょっと弄って、画像のサムネイルがずらっと並ぶ一覧ページを作る方法について解説します。
表示するのは、記事に投稿された画像(のサムネイル)・記事タイトル・カテゴリー名、の3つとします。
記事に関連付けられていない画像(ライブラリから引っ張った画像)は表示されません。
※上記のサンプル画像のwordpressでは、サムネイルの最小サイズを100x100pxの切り抜き設定にして、それを表示しています。
※記事のギャラリーに投稿された画像のサムネイルを利用するもので、
2.9で実装された投稿サムネイル機能とは全く別物です。ご注意ください。
WordPress2.7は画像に「大サイズ」が加わって全部で4種類になりました。
記事から投稿された画像を出力する内容のエントリーはこれまでに何度か書いてますが、
wp_get_attachment_image() を利用して画像をゲットする関数を作ったので晒しておきます。
関連記事
テンプレートカスタマイズするときに使えそうなソースをつらつら書き散らすよ!(その1・その2)
自作関数ネタが多いです。
デフォルトだとheadにwordpressが自動でgeneratorを追加しますが
<meta name="generator" content="WordPress 2.7" />
meta name=”generator”はセキュリティ的に入れない方がいいと言われてます。
これ入ってるとバージョンアップサボってるのもモロバレ。(ex:このブログ)
アクティブテーマのfunctions.phpに以下1行追加
remove_action('wp_head', 'wp_generator');
remove_action()関数は必要のない動作を一発で消す事が出来るので覚えとくと便利。
プラグイン使わなくても一応出来るよ。ってことで。
functions.php
function getCustom($key,$id) { $custom = get_post_custom_values($key, $id); if(count($custom)!=1) return implode("<br />",$custom); else return $custom[0]; }
値が複数ある場合は改行でくっつけてから帰します。
テンプレートファイルのループ内
print getCustom("key",get_the_ID());
the_ID()使うならループ内、変数とかに入れておけばループ外でもいける。
直接テンプレートファイル内に関数の部分入れて処理しても良い。
WordPressのビジュアルエディタに自作したボタンを追加する方法についてのメモです。
TinyMCEのプラグイン作成手順メモにもなっています。
ver2.5以下は確認してないのでどうだか分かりません。多分TinyMCEのバージョンが違うので動かないと思います。
ver2.7は動きました。
ver2.9も動きました。
サンプルとして▼こういうテーブルをボタン1発で追加出来るようにします。
Name | |
---|---|
Address | |
TEL | |
FAX | |
URL |
プラグインとかで記事のテンプレートを作っておくという手もあるけど、ボタン挿入の方が汎用的に使えるので楽です。
エディタへのテキスト挿入以外にもいろいろな事がやれます。
結構面倒くさいので初心者向きではありません。
あとついでにエディタ内のスタイル変更についても解説しています。
なお、この方法はTinyMCE Advancedの影響を受けません。
セレクトメニューについて追記
テンプレートカスタマイズに使えそうなソースをつらつらとまた書き散らす。その1はこちら。
今回はテクニカルなものが多いかもしれない。
ページとかカテゴリー単体にリンクしたい場合には、get_category_link()及びget_permalink()を使う。
引数はそれぞれカテゴリーIDとページIDです。
<ul id="glovalnavi"> <li><a href="<?php echo get_option('home'); ?>" rel="index" title="<?php _e('Go to site top.'); ?>">HOME</a></li> <li><a href="<?php echo get_category_link(1);?> " rel="category" title="<?php _e('View all posts in Event information.'); ?>">イベント情報</a></li> <li><a href="<?php echo get_permalink(1); ?> " rel="page" title="<?php _e('Sample Page.'); ?>">ページ</a></li> </ul>
single.phpとかにHOMEとカテゴリと記事タイトルのリンクを出すだけで作れます。
ループ内に以下のソースを入れる。
<p><a href="<?php bloginfo('home'); ?>" title="<?php _e('Home'); ?>"><?php _e('Home'); ?></a> > <?php the_category(' | ') ?> > <span><?php the_title(); ?></span></p>
もっと実用的にタイトルと連動させるならこの記事の関数が便利だと思う。
質問された、カスタムフィールドで設定した値で記事を並び替えて表示するサンプルを晒してみる。
オススメ度とかでランキングっぽいことしたい時に使えるのか・・・な?
やってることはarray_multisortによる多次元配列のソートです。
サンプル関数の使い方は次の通りです。
以上。
サンプルソースは用途に応じて適当に変更するといいと思います。
参考ページ
追加