カテゴリー: WEB & PC
プラグインを使わずに「the_content」内の画像をlightboxで表示にする方法
※この方法を利用する場合は、wordpressのテンプレートファイルをカスタマイズする必要があります。
まず、「lightbox2」をダウンロードします。
このままjsファイルを使用すると、lightboxの閉じるボタンやローディング画像がリンク切れになってしまいますので、あらかじめこれらの画像ファイルをwordpressのメディア等でアップロードしておきます。
その後、「js/lightbox.js」ファイル内の画像リンクを、http://～から始まるURLで指定します。
テンプレートのheader.phpで、必要なファイルを読み込みます。
<link href="<?php bloginfo('template_url'); ?>/css/lightbox.css" type="text/css" rel="stylesheet" media="screen" />
<script src="<?php bloginfo('template_url'); ?>/js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_url'); ?>/js/lightbox.js" type="text/javascript"></script>
function.phpに以下と追加します。
function lightbox_auto($content) {
global $post;
$pattern[0] = "/<a(.*?)href=('|")([A-Za-z0-9/_.~:-]*?)(.bmp|.gif|.jpg|.jpeg|.png)('|")([^>]*?)>/i";
$pattern[1] = "/<a(.*?)href=('|")([A-Za-z0-9/_.~:-]*?)(.bmp|.gif|.jpg|.jpeg|.png)('|")(.*?)(rel=('|")lightbox(.*?)('|"))([ trnvf]*?)((rel=('|")lightbox(.*?)('|"))?)([ trnvf]?)([^>]*?)>/i";
$replacement[0] = '<a$1href=$2$3$4$5$6 rel="lightbox['.$post->ID.']">';
$replacement[1] = '<a$1href=$2$3$4$5$6$7>';
$content = preg_replace($pattern, $replacement, $content);
return $content;
}
add_filter('the_content', 'lightbox_auto');
function my_get_attachment_link( $link, $id, $size, $permalink, $icon, $text ) {
return preg_replace( '/s+title=/', " rel="lightbox[".$id."]" title=", $link );
}
add_filter( 'wp_get_attachment_link', 'my_get_attachment_link', 10, 6);これで、「wp_contents」内の<a>タグに、強制的に「rel=lightbox」が追加されます。
実装してから少し時間が経っているので、もしかしたら抜けている部分があるかもしれませんが、そのときはすみません。
プロフィール項目の削除・追加
ユーザー情報として「aim」や「jabber」や「yim」とかあるけど、使ったためしがない。
なのでプロフィール画面から消してしまおう。
＜手順＞
テーマのfunction.phpに以下を追加
function my_user_meta($x) {
unset($x['aim']);
unset($x['jabber']);
unset($x['yim']);
return $x;
}
add_filter('user_contactmethods','my_user_meta');この「$x」というのは、任意の変数名みたいだ。
他のサイトでも命名はバラバラだった。
さて次に追加だ。
さきほどの項目より、「twitter」や「facebook」や「pixivID」などのほうが有益なのだ。
だから追加する。
さきほどのメソッドに追記。つまり全部書くとこんな感じ。
function my_user_meta($x) {
unset($x['aim']);
unset($x['jabber']);
unset($x['yim']);
$x['twitter'] = 'Twitter';
$x['facebook'] = 'Facebook';
$x['pixiv'] = 'Pixiv';
return $x;
}
add_filter('user_contactmethods','my_user_meta');これでプロフィール画面に項目が追加されたと思う。
では、追加した項目をどうやって表示するかというと、テンプレートに以下のようなソースを書けばOK。
<p>投稿者の Twitter ID: <?php the_author_meta('twitter'); ?></p>
ログイン画面とダッシュボードのwordpressロゴを変更する。
ここで変更するのは2箇所。
ちなみに、今回作業したwordpressのバージョンは3.4.1だ。
まずログイン画面。
ログインフォーム上部の「wordpress」というロゴを、オリジナルのロゴに変更する。
まず大本の素材を作成する。
上記「wordpress」ロゴ画像が以下の場所にあるので、これをグラフィックソフトなどで修正する。
/wp-admin/images/wordpress-logo.png
もしくは新規で作成しても問題なし。その場合のサイズは274×63ピクセル。
このオリジナルロゴ画像をテーマフォルダにコピーする。ここでは「img」フォルダに入れたとする。
次に、テーマフォルダの「function.php」にコードを追加する。それが以下。
function custom_login_logo() {
echo '<style type="text/css">h1 a { background: url('.get_bloginfo('template_directory').'/img/wordpress-logo.png) 50% 50% no-repeat !important; }</style>';
}
add_action('login_head', 'custom_login_logo');ファイルパス等に注意！
以上。
次はダッシュボード左上に出てくる「W」ロゴ。
↓これね。
これも同じように元画像を修正する。
ただし、これは他で使う画像も含まれている縦長の画像なので、新規で作るより不要な箇所のみ修正する方が楽だろう。
まぁ、実際に画像を見てもらえばわかると思う。
対象画像は以下のフォルダにある。
/wp-includes/images/admin-bar-sprite.png
今回僕は「W」のロゴ（薄いグレーと濃いグレーの両方）を、オリジナルのロゴに変更した。別に2箇所とも全く同じロゴでもかまわない。
マウスオーバー時にロゴが変化しないだけだ。
画像を修正したら、テーマフォルダにアップロードする。
次に「function.php」だ。
以下のコードを追加する。
function my_custom_logo() {
echo '<style type="text/css">.ab-icon { background-image:url('.get_bloginfo('template_directory').'/img/admin-bar-sprite.png) !important;background-position:0 -76px; }</style>';
}
add_action('admin_head', 'my_custom_logo');以上。
【firefox】キーボードショートカットキーを変更する
なぜキーボードショートカットキーを変更する必要があるのかというと、プラグインで割り当てられているショートカットキーが、時々バッティングするからだ。
今回は「web developer」でｃｓｓを無効にするキー（ctrl+shift+w）と、はてなブックマークのキーがバッティングしてた。
そこで登場するのが「keyconfig」というプラグイン。
firefoxのアドオンページからDLできないので少々不安だが、とりあえず下記サイトから拾ってくる。
あ、わざとらしいですが、くれぐれも自己責任でお願いします。
アドオンマネージャから「keyconfig」の「設定」をクリックすると、下のようなダイアログが出てくる。
青色に反転しているキーが重複しているものなので、「名前」の列から変更したい項目を探してクリック選択し、リスト直下のショートカットキーを変更して「適用」を押す。
今回の場合は「はてなブックマーク」のショートカットを変更したので、web developerのショートカットが復活した。