カテゴリー
SugiBlog Webエンジニアのためのお役立ちTips

画像を挿入した時のタグをカスタマイズ – WORDPRESS

挿入した画像のリンクにLightbox等の属性を追加したいとき、
その都度、手作業で挿入されたタグを編集してもいいですが
自動でできれば、それに越したことはないですよね?

そんなとき、フィルターフックに自作関数をフックして挿入されるタグをカスタマイズします。
※挿入されるときに適用されるので、それまでの投稿には反映されません。

Lightboxで必要なrel属性を追加します。以下のコードをfunctions.phpに追加。

function my_image_tag( $html, $id ) {
    $html = preg_replace('/a href=/', 'a rel="lightbox['.$id.']" href=', $html); 
    return $html;
}
add_filter( 'image_send_to_editor', 'my_image_tag', 10, 2 );

続きを読む…»

6,024 views

WORDPRESSの子テーマを作成する

WORDPRESSでは、既存のテーマを元に子テーマを作成することができます。
最低限必要なのは、テーマの基本となるスタイルシートファイル(style.css)のみです。
あとは、スクリーンショットがあれば尚可。

まず、themesディレクトリに子テーマ用のディレクトリを作成します。
ここでは親テーマの名前を「parent」、子テーマの名前を「child」とします。

wp-content/themes/child

style.cssを作成します。

/*
    Theme Name: child
    Template: parent
*/

@charset "utf-8";
@import url("../parent/style.css");

@import url();にて親テーマのCSSファイルを相対パスを指定して読み込みます。
そして、このファイルにスタイルを記述していけば親テーマのスタイルよりもこちらが優先されます。
続きを読む…»

2,121 views

スマートフォン対応デザイン

当サイトのスマートフォン対応デザインが完成しました。

iPhoneやAndroid端末でアクセスするとそちらが表示されるようになっています。

1,362 views

コメントフォームの設置

headタグ内のwp_head();より前に記述。
コメント返信用のJavaScriptを挿入してくれます。

<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>

記事表示のループの中に以下を追加します。

<?php comments_template(); ?>

簡単にコメント機能を追加するには以上です。
フォームや、コメント表示など、デフォルトの機能で自動にやってくれます。
フォームをカスタマイズする場合は、comments.phpを作成する必要があります。
それはまた後日。。

こちらを参考にさせていただきました。
http://scianto.net/2009/03/02232201.php

3,319 views

WORDPRESS アップデート

バージョン3.2.1をインストール。
ついでに、携帯表示やiPhone・Android表示のプラグイン等を追加したので
メモしておく。

・Ktai Style
携帯電話用に表示を最適化してくれるプラグイン

・SexyBookmarks (by Shareaholic)
ソーシャルブックマークリンクを挿入タグなしに表示してくれるプラグイン
続きを読む…»

1,864 views