Home > wordpress

wordpress Archive

カスタムフィールドを使用して投稿別に個別のCSSを適用する方法【WordPress】

それぞれの投稿に個別のcssやjsを適用したいときの対処方法。

もちろんidなどをつけてテーマのstyle.cssに記述しても反映されるのだが、全頁で読み込まれてしまい好ましくない。
よって個別のcssをつくり読み込む方法をメモ。

カスタムフィールドで読み込むファイルを指定します。
head内の読みこませたい箇所に下記を記述 。

<?php
 if (is_single()) {
  //カスタムフィールド「post_css」の値があればCSSファイル読み込み
  $post_css = get_post_meta( $post->ID , 'post_css' , true );
  if ($post_css !== "") {
   echo '<link href="' .get_bloginfo('template_directory') . '/css/' . $post_css .'.css" rel="stylesheet" type="text/css" />';
  }
  //カスタムフィールド「post_js」の値があればJSファイル読み込み
  $post_js = get_post_meta( $post->ID , 'post_js' , true );
  if ($post_js !== "") {
   echo '<script type="text/javascript" src="' .get_bloginfo('template_directory') . '/js/' . $post_js .'.js"></script>';
  }
 }
?>

テーマフォルダに「css」フォルダと「js」フォルダを作成し、その中に各ページ個別のcssファイル、jsファイルを入れる。
各投稿の新しいカスタムフィールドを加して、名前に「post_css」または「post_js」、値にファイル名を入れる。

例:
投稿ID35にpost35.css をリンクしたい場合、post35.cssをテーマ内cssフォルダに入れる。
投稿編集でカスタムフィールドを新規追加し、名前に「post_css」、値に「post35」と入力する。

これでスタイルシートが読み込まれる。
また個別ページの他、ページにも適用したい場合は

if (is_single() || is_page()) {
...
}

といった感じで条件を変更すればOK。

プラグインなどもいくつかあるようでコリスさんでもご紹介されていますので、プラグイン希望の方は参照してみてください。
【coliss】WordPressの記事ごとに個別のCSS, JavaScriptを追加できるプラグイン -Custom CSS and JS

【参考記事】
【作業メモ】WordPressで投稿毎に特定のCSSやJavascriptを読み込む

特定の投稿(記事)の条件分岐方法【wordpress】

カテゴリーなどでの条件分岐はCodexにも記載されているのですぐ分かったのだが、
記事ごとに異なる条件を付けたい場合の記述方法は記載されていないのでメモします。

特定の投稿(記事)の条件分岐方法
投稿IDが18の場合

<?php
if ($post->ID == 18) {
echo "やったー";
}
?>

ちなみに、現在の記事がカテゴリーID 5に属する場合

<?php
if (in_category('5')) {
echo "カテゴリー5";
}
?>

記事がカテゴリーID 4,5,6に属さない場合

!in_category( array( 4,5,6 ) )

【Codex】条件分岐タグ

【wordpress】wordpressの外にあるhtmlに、カテゴリーAの新着リストを表示したい

wordpressの外にあるhtmlに、カテゴリーAの新着リストを表示したい。
いくつか方法はあるようだが考える時間もあまりないので、
とりあえずささっとリストページを1枚作って、読み込むことにする。

まず、get postsを使ってリストをつくる。

page_a.php

<?php
/*
Template Name: page_a
*/
?>
<ul>
<?php
$postslist = get_posts('numberposts=10&order=DESC&orderby=post_date&category=1');
foreach ($postslist as $post) :
setup_postdata($post);
?>
<li><?php the_time('Y/m/d'); ?>&nbsp;<a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
<?php endforeach; ?>
</ul>

パラメータなど下記参照。
【Codex】テンプレートタグ/get posts

これをインクルードするなりなんなりする。

–2010.11.18追記ここから–

インクルードっていうか、そんなややこしいことせずに出来るやん。
やっぱり慌てちゃだめだね。

下記のような感じ。

anew.html (表示したいファイル)

<?php require('./wp/wp-blog-header.php'); ?>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>test</title>
</head>
<body>
<h2>Category-a What's new</h2>
<ul>
<?php
$postslist = get_posts('numberposts=10&order=DESC&orderby=post_date&category=1');
foreach ($postslist as $post) :
setup_postdata($post);
?>
<li><?php the_time('Y/m/d'); ?>&nbsp;<a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
<?php endforeach; ?>
</ul>
<p>right!!</p>
</body>
</html>

つまり、下記を先頭に記述して、あとは普通に呼び出せるよってこと。

<?php require('./wp/wp-blog-header.php'); ?>

上記の./wp/の箇所はディレクトリに合わせて記述する。
wp-blog-header.phpはwordpressの直下にいます。

今回はhtmlで表示しましたが、その際は.htaccessに下記を記述しておきます。

<Files index.html>
AddType application/x-httpd-php .html
</Files>

–追記ここまで–

そして、今さらなのだが…

foreach ($postslist as $post) :

の最後の ”:”
コロンだけど???
と、PHPを理解してない私は疑問に思い調べました。遅っ…。

if、for、foreach、while のような制御構造は次のような単純化されたフォーマットで書くことができるそうです。

下記、ビューファイル向けの代替のPHP構文 から引用します。

foreachを使った例は次の通りです:

<ul>
<?php foreach($todo as $item): ?>
<li><?=$item?></li>
<?php endforeach; ?>
</ul>

中括弧がいらないのを注意してください。
終わりの中括弧が代わりに endforeach に置きかわっています。

また、各制御構造は(最後のものを除き)、各文の末尾にセミコロン ( “;” ) を使う代わりに、コロン ( “:” ) を置くことを注意してください。これは重要です!

下記は、if/elseif/else を使ったもう一つの例です。コロンのところを注意してみてください:

<?php if ($username == 'sally'): ?>
   <h3>Sallyさん、こんにちは</h3>
<?php elseif ($username == 'joe'): ?>
   <h3>Joeさん、こんにちは</h3>
<?php else: ?>
   <h3>誰かさん、こんにちは</h3>
<?php endif; ?>

だそうです。
すっきりー。

【dogmap.jp】で下記のような方法も紹介されています。
Google Feed AJX API を使用して JavaScript で、最新記事を表示する方法
自前の JSONP 形式出力プログラムを設置して JavaScript で、最新記事を表示する方法

あー、勉強しなくっちゃ。

metaタグのGenerator消し方【WordPress】

コアファイル変更しなくても、プラグインを入れなくても、消せる方法。

まずは、もとのある場所

wp-includes/default-filters.php の

// Actions

add_action( 'wp_head', 'wp_generator' );

の後に

remove_action('wp_head', 'wp_generator');

を追記することで消えます。

だけど、このファイルを直接さわったら面倒じゃーん。
ということなので、
テーマのfunction.phpに書き加えます!

<?php
remove_action('wp_head', 'wp_generator');
remove_action('wp_head', 'rsd_link');
remove_action('wp_head', 'wlwmanifest_link');
?>

ってなかんじです。

remove_action(‘wp_head’, ‘rsd_link’);
これはiPhoneなどで投稿する時に使うらしい。使わない場合は上記のようにして消すことが可能。

remove_action(‘wp_head’, ‘wlwmanifest_link’);
これはWindows Live Writer を使ってブログ投稿する時に使うらしい。使わない場合は上記のようにして消すことが可能。

ただ、これだとfeedのgeneratorは消えないんだよなー。

feedのgeneratorを消したい【WordPress】

元は下記にある。
wp-includes/default-filters.php

// Feed Generator Tags
foreach ( array( 'rss2_head', 'commentsrss2_head', 'rss_head', 'rdf_header', 'atom_head', 'comments_atom_head', 'opml_head', 'app_head' ) as $action ) {
 add_action( $action, 'the_generator' );
}

今回はテーマ内でfeedの調整をしているので、
テーマ内のfeedのテンプレートの

<?php do_action('rss2_head'); ?>

を削除で消える!!

【関連記事】
フィードのテンプレートをカスタマイズしたい!【WordPress】
metaタグのGenerator消し方【WordPress】

プラグインを使わずにログイン画面をカスタマイズしよう【WordPress】

前の記事でプラグインを使ったカスタマイズ方法を記述したが、既存のログイン画面のロゴさえ変えれればいい時に使えそうな記事を発見したので備忘録&ご紹介!!使えそう!!

使っているテーマのfunction.phpに下記コードを追記

function my_custom_login_logo() {
    echo '<style type="text/css">
        h1 a { background-image:url('.get_bloginfo('template_directory').'/images/custom-login-logo.gif) !important; }
    </style>';
}
add_action('login_head', 'my_custom_login_logo');

テーマ内「images」フォルダにロゴマークを「custom-logo-login.gif」というファイル名で置く。

なんということでしょう!!
これでロゴマークが変更されました。

簡単!!感謝!!

【参考・引用元記事】
【WPRECIPES】Customize WordPress login logo without a plugin
【Codex】関数リファレンス/add action
【Codex】プラグイン API/アクションフック一覧

【関連記事】
プラグイン使用 ログイン画面をカスタマイズしよう【WordPress】
WordPress管理画面のロゴを変える方法

ログイン画面をカスタマイズしよう【WordPress】

WordPressのログイン画面に企業ロゴなどを入れたい。

以前、【ログイン画面を変更する【WordPress】】という記事を書いたが、この方法だと、コアな部分を変更することになるので、納品後のメンテナンスのしやすさを考え、プラグインを使ってみようかということで、その備忘録です。

今回はBM Custom Login Pluginというプラグインを使ってみる。

  1. プラグインをダウンロードして解凍する
  2. イメージ画像作成
    解凍したフォルダ内の「image-templates」フォルダの中の
    「login-bkg-tile.psd」「footer.png」を参考にデザインをカスタマイズする。
  3. 画像は「images」フォルダに、ファイル名「login-bkg-tile.jpg」「login-bkg-bottom.gif」で格納する。
    すでに「images」フォルダにある「login-bkg-tile-SAMPLE.jpg」は未使用なので削除してもよい。
  4. 必要に応じてスタイルシートを変更する
    今回私が使用しているのはver3.0なのでスタイルのカスタマイズは「bm-custom-login-3.css」というファイルを修正する。ver2.7までは(bm-custom-login-2.cssを修正)
    今回は具体的にはもう少し狭い幅で作りたかったので画像の幅を小さくしてつくったので、合わせてcssの関連するwidthも小さくした。
  5. 「bm-custom-login」フォルダを「wp-content/plugins」にアップする。
    「image-templates」フォルダは素材なのでアップしなくてもよい。
  6. 管理画面で「bm-custom-login」を有効にする。

これでできあがりー!!

【関連記事】
WordPress管理画面のロゴを変える方法

※この記事を書いたあと、プラグインを使わずにロゴ部分のみカスタマイズする方法を発見したので記事を分けて書きましたのでそちらもご参考に。
プラグインを使わずにログイン画面をカスタマイズしよう【WordPress】

アーカイブページのmetaタグのtitleに親カテゴリ名と子カテゴリ名を入れたい【WordPress】

やりたかったこと。

ファイル:header.php
カテゴリーページのmetaタグのtitleに親カテゴリ名と子カテゴリ名を入れたい。

ただ、うまくいかなくて、まわりまわって結局簡単なことじゃん…
ってなったわけだけど、その考えた経緯を含めメモしておこう。
他で使うかもしれないし…
同じように困っている人もいるかもしれないし…

とにかく、メモメモ!

今回、カテゴリは下記のようなかんじ。

  • たのしい(5)
    - お知らせ(3)
    - できごと(2)
  • かなしい(3)
    - お知らせ(1)
    - できごと(2)

のようになっている。
カテゴリは必ず「お知らせ」か「できごと」に属し、「たのしい」か「かなしい」を親カテゴリにもつ。
親カテゴリの「たのしい」に直接属することはない。

まず、基本的には下記でいいはず。

wp_title( '' ); echo '|'; bloginfo( 'name' );

だが、これだと 

お知らせ|ブログタイトル

ってなる。でもほんとは、

たのしいお知らせ|ブログタイトル

って見せたい。
ということは、親カテゴリのカテゴリ名の取得が必要だ。
下記で親カテゴリを吐き出すことに成功。

$cat = get_the_category();
$cat = $cat[0];
$parent = get_category($cat->category_parent);
$parent_catname = $parent->cat_name;
echo $parent_catname;

※親カテゴリのID
$cat->category_parent;

ということは…

$cat = get_the_category();
$cat = $cat[0];
$catname = $cat->cat_name;
$parent = get_category($cat->category_parent);
$parent_catname = $parent->cat_name;
echo $parent_catname .$catname .' | '; bloginfo( 'name' );

これで、
たのしいお知らせ|ブログタイトル
になったー!!
と、よろこんだのも束の間、問題発見。
「お知らせ」のアーカイブの時はいいのだが、「たのしい」のアーカイブでも
たのしいお知らせ|ブログタイトル
となってしまう。
うーーん…

<?php $cat = get_the_category();
 echo(get_category_parents($cat[0]->cat_ID, TRUE, ''));
 if (is_null($cat[1])){
 }else {
  echo '|'.(get_category_parents($cat[1]->cat_ID, TRUE, ''));
 }
?>
ってしてみたり、
<?php $cat = get_the_category();
 echo(get_category_parents($cat[0]->cat_ID, TRUE, ''));
 if ($cat[1]!=""){
  echo '|'.(get_category_parents($cat[1]->cat_ID, TRUE, ''));
 }
?>

ってしてみたり…

なんか子カテゴリの値調べたりとか親カテゴリ調べたり、is_nullとか使ってみたり、っていうか空じゃないときをどうかいたらいいか分かんなくなってみたり、だんだん混乱してきたのでここはひとつ冷静に!
get_category_parentsは始めに試してうまくいかなかったっけ…

って、まわりにまわって再びget_category_parentsにたどりつく。
とりあえず、もう一度、冷静に。

echo (get_category_parents($cat, false, '&nbsp;') .'|&nbsp;'); bloginfo( 'name' );

おぉーーーーー!!!でるじゃんか!!
たのしいお知らせ | ブログタイトル
いぇーい!
「たのしい」のアーカイブは?
たのしい | ブログタイトル
出る!!いぇーーい!!

echo (get_category_parents($cat, true, '&raquo;&nbsp;') .'|&nbsp;'); bloginfo( 'name' );

みたいにすると、
各カテゴリーへのリンクを出力するのでタイトルでは使えない。
&raquo;&nbsp;はセパレータ。自由に設定!

よって、今回のmetaタイトルのアーカイブの条件分岐は

if ( is_category() ) {
 echo (get_category_parents($cat, false, '') .'|&nbsp;'); bloginfo( 'name' );
}

となった。
あー、、、長かった…
あー、単純なことだった…
でもまぁとにかく、解決できてよかった。

最後にget category parentsについてメモ。

書式

<?php echo(get_category_parents(category, display link, separator, nice name)); ?>

ループ内・外 で使用可能

引数
category (整数/$cat)
親カテゴリーを取得するカテゴリーのID。デフォルト値は「$cat」で、現在表示しているカテゴリーページ/記事のカテゴリーID。

display link (true/false)
各カテゴリーへのリンクを出力するかどうか。
true(デフォルト。リンクを出力する)
false(デフォルト。リンクを出力しない)

separator (文字列)
リンクの間を区切る記号やテキスト。デフォルト値は「»」。
nice name (true/false)- カテゴリー・スラッグを名前として使うかどうか。

true(デフォルト。英数字小文字のみのカテゴリー・スラッグを出力)
false(デフォルト。大文字や記号、日本語を使ったカテゴリー名を出力)

コード記述例

<?php echo(get_category_parents($cat, true, ' » ')); ?>

【関連Codex】

フィードのテンプレートをカスタマイズしたい!【WordPress】

フィードのテンプレートをカスタマイズしたいと思い調べてると、
RSS feedのテンプレートってないの??
って壁にぶち当たる。

今回は、コメント機能を使わないのに、RSS feedだと、コメント(0)って出ちゃう。
これってなんかいやだなっと思い、テンプレートについて調べてみるがどうやらないらしい。

んー、、、wp-includeの中のファイルを修正するしかないみたい?
それはいやだなー…

ということで、さらに調べてみると、すばらしい回答に出会えました。

アクションフックの remove、add で、簡単にできるらしいです。

詳細は下記サイトで紹介されています。

【atl*weblog】wordpressで非公開コミュニティサイトを作る(4)feedのカスタマイズ
【dogmap.jp】各種フィード用テンプレートの変更

複数のカテゴリーに属している記事のタイトルに複数のアイコンをつけたい【WordPress】

複数のカテゴリーに属している記事のタイトルに複数のアイコンをつけたい。
ということを実現するのにかなり時間を費やしてしまった…
あーもっと検索上手にならなくっちゃ。
ってその前に、もっと勉強しなきゃ…

下記、迷える人がいたら参考になればと…
ただ、もっといい方法があれば是非おしえてください。

さて、今回、アイコン表示は以下のようなルールにしたいと思ってとりかかったわけで…

カテゴリA (ID=1)
カテゴリAの子
カテゴリAの子の子
カテゴリB (ID=2)
カテゴリBの子
カテゴリBの子の子

があったとする。

カテゴリA、カテゴリAの子、カテゴリAの子の子 の記事はAのアイコン
カテゴリB、カテゴリBの子、カテゴリBの子の子 の記事はBのアイコン
カテゴリA、カテゴリBの子の二つに属する場合はAのアイコンとBのアイコン

といった具合にしたかった。

まず試したのが下記の方法

<?php
  $post_cats = get_the_category();
  if ( $post_cats[0]->cat_ID == 1 || $post_cats[0]->category_parent == 1 || cat_is_ancestor_of( 1, (int)$post_cats[0]->category_parent ) ) {
  echo 'Aアイコン';
 } else {
  echo 'Bアイコン';
 ?>

これだと、複数のカテゴリに属する場合、1つ目しか読み込まない。
よって、カテゴリA、カテゴリBの子の二つに属する場合はAのアイコンしか表示されなくなってしまう。

やりたいことはこれじゃない!

そして彷徨ってようやく見つけたのは
フォーラム【特定のカテゴリ記事へのアイコン表記 】
この記事で下記のような方法を発見
下記引用

テーマのディレクトリー直下に category-SLUG.png を作っておけば、それを表示するというサンプルです (SLUG の部分は実際のカテゴリースラッグに差し替えてください)。

<?php
$ClassAddCategory = '';
$cats = wp_get_post_categories(get_the_ID());
if( is_array( $cats)){
  foreach( $cats as $cat){
    $cobj = get_category( $cat);
    $icon_file =  '/category-' . $cobj->slug . '.png';
    if (file_exists(get_template_directory() . $icon_file)) {
        echo '<img src="' . get_template_directory_uri() . $icon_file . '" alt="' . $cobj->name . '" />';
    }
  }
}
?>

ほぉー…
しかしこれでは子孫のところがうまくいかない。
すべての子孫カテゴリーの画像も用意すればいいのかもしれないが、同じ画像がいくつもあるのはスマートじゃない!しかもカテゴリーが増えるたびに画像も…。それは大変だー。

さらに旅を続けること数時間…

見つけたー!!これ!!

post_is_in_descendant_category 関数!!

下記で定義する post_is_in_descendant_category 関数(呼び出す前にテンプレート、プラグイン、またはテーマ関数にコードをコピーする必要がある)を使用することで実現可能!

post_is_in_descendant_category 関数

<?php
/**
 * Tests if any of a post's assigned categories are descendants of target categories
 *
 * @param int|array $cats The target categories. Integer ID or array of integer IDs
 * @param int|object $_post The post. Omit to test the current post in the Loop or main query
 * @return bool True if at least 1 of the post's categories is a descendant of any of the target categories
 * @see get_term_by() You can get a category by name or slug, then pass ID to this function
 * @uses get_term_children() Passes $cats
 * @uses in_category() Passes $_post (can be empty)
 * @version 2.7
 * @link http://codex.wordpress.org/Function_Reference/in_category#Testing_if_a_post_is_in_a_descendant_category
 */
function post_is_in_descendant_category( $cats, $_post = null )
{
 foreach ( (array) $cats as $cat ) {
  // get_term_children() accepts integer ID only
  $descendants = get_term_children( (int) $cat, 'category');
  if ( $descendants && in_category( $descendants, $_post ) )
   return true;
 }
 return false;
}
?>

私はこれをfunction.phpにコピーして、テンプレは下記のように…

<?php
 if ( in_category(1) || post_is_in_descendant_category(1) ) {
  echo 'Aアイコン';
 }
 if ( in_category(2) || post_is_in_descendant_category(2) ) {
  echo 'Bアイコン';
 }
?>

これでやりたかったことが実現。

まぁ、親カテゴリーが増えると増やさなくてはいけなのであんまりスマートじゃないかな…?
でも子孫が増える分には問題なし!
今回は親カテゴリはほぼ増えないのでよしとする!
上記2つの方法をうまく組み合わせてカテゴリーが増えてもいいようにできそうだが、
とりあえず今日は力尽きたのでここまで。
とりあえず実現できたということで。

ふぅー長かった~

ホーム > wordpress

want

Return to page top