記事の投稿ステータスによって管理画面・編集画面の色を切り替える

WordPressって記事を編集している時、その記事が既に公開されている記事なのか下書き・非公開状態なのか気づきにくいですよね。まぁ公開ステータス見ればわかりますけど、まだ公開しちゃいけない記事をうっかり公開してたり、公開したつもりが公開してなかった!という事があっては企業サイトではまずいので、公開状態が一目でわかるカスタマイズです。

まずは管理画面用に独自のCSSを読み込むようにします。

functions.phpに以下を追加

/*-------------------------------------------*/
/*	管理画面_スタイルを追加
/*-------------------------------------------*/
function bizVektor_admin_css(){
	echo '<link rel="stylesheet" type="text/css" href="'.get_template_directory_uri().'/admin.css" />';
}
add_action('admin_head', 'bizVektor_admin_css', 11);

これでテーマフォルダに admin.css を置けば読み込むようになります。

次に管理画面のbodyタグに投稿ステータスによってクラス名を割り当てます。

/*-------------------------------------------*/
/*	管理画面_投稿ステータスをbodyのclassに追加
/*-------------------------------------------*/
function bizVektor_postStatus(){
	$classes = get_post_status() // 投稿の状態を取得; ?>
	<script type="text/javascript" charset="utf-8">
	function postStatusColor(){
		// 現状のクラス名を取得して投稿ステータスを足す
		var newClass = document.getElementsByTagName("body")[0].className + " <?php echo $classes ?>";
		// 現状のクラス名を置き換える
		document.getElementsByTagName("body")[0].setAttribute("class",newClass);
	}		window.onload = postStatusColor;
	</script>
<?php
}
add_action('admin_head', 'bizVektor_postStatus', 12);

って・・・これjavascriptで力技で書き換えてるんですけど、WordPressのフィルターフックで管理画面のbodyにクラス追加するとかないんでしょうかね・・・。表画面は body_class だったかな、そんなのがあったのですが・・・。

で、管理画面用のcss (admin.css) をカスタマイズ。例えばこんな感じ

/*-------------------------------------------*/
/* 記事タイトル欄
/*-------------------------------------------*/
/* 非公開 */
body.private #wpwrap #titlewrap input,
/* レビュー待ち */
body.pending #wpwrap #titlewrap input,
/* 新規追加? */
body.auto-draft #wpwrap #titlewrap input,
/* 下書き */
body.draft #wpwrap #titlewrap input { border:2px solid #F66; }
/* 公開済み */
body.publish #wpwrap #titlewrap input { border:2px solid #39C; }
 
/*-------------------------------------------*/
/* 公開ボックス
/*-------------------------------------------*/
body.private #submitdiv,
body.pending #submitdiv,
body.auto-draft #submitdiv,
body.draft #submitdiv	{ border:2px solid #f66; }
body.publish #submitdiv	{ border:2px solid #39C; }

すると、
■下書きや非公開の場合
WordPress 管理画面 カスタマイズ

■公開済みの場合
WordPress 管理画面 カスタマイズ公開済み

地味なところですが参考まで。

アメブロの新着情報を広告(PR)無しでサイトに表示する その2 – simplexml_load_fileが使えない・・・ -

前記事:アメブロの新着情報を広告(PR)無しでサイトに表示する

またまたブログの新着情報をサイトのトップに表示したいとの依頼があったので、その部分のデザイン調整をして前回のソースコードをベタっと貼って終了!

・・・と・・・

思ったら・・・

Warning: simplexml_load_file() [function.simplexml-load-file]: http:// wrapper is disabled in the server configuration by allow_url_fopen=0 in /home/*******-com/public_html/wp-content/themes/*****/front-page.php on line 87

はぁ?何言ってんの君、言いたいことがあったら日本語で言えよ!( ゚Д゚)、ペツ

RSSって外部のファイルを読み込むわけなので、なんでもかんでも許可しちゃうとセキュリティがごにょごにょとかサーバーに負荷がごにょごにょとかで、由緒正しいサーバー(WA●AX)としては得体のしれないファイルの読み込みを許可するのもどうかという事で、 allow_url_fopen を許可してないらしい・・・

・・・

(;・∀・) ナン! (; ∀・)・ デス!! (; ∀ )・・ トー!!!

って事で、とりあえず別の方法で引っ張ってくる方法はこちらに書いてありました
http://lab.gpol.co.jp/tsubo/index_3.php

ただ、このままだと、またしてもアメブロの広告が混じってしまうので、広告が混じらないようにしたのがこちら

<!-- ブログの新着情報をRSSで読み込む --><script type="text/javascript" src="http://www.google.com/jsapi"></script><script type="text/javascript">// <![CDATA[
google.load("feeds", "1");
function initialize() {
	var feed = new google.feeds.Feed("http://feedblog.ameba.jp/rss/ameblo/aiken-y/rss20.xml");  // 読み込むRSS
	feed.setNumEntries(10); // データ自体はちょっと多めに10件引っ張ってみてるのかな
	feed.load(function(result) {
		if (!result.error) {
			var rsshtml = "";
			var entryPrintCount = 0 ; // 表示カウント初期化
			var entryNumber = 0;
			while ( entryPrintCount < 5 ) { // 5件(0-4件)表示
 
				// entryNumberにとりあえず番号が入ってPR込みでデータが読み込まれる
				var entry = result.feed.entries[entryNumber];
				// entryに配列入れた後カウントを1足す
				entryNumber++;
 
				// タイトルの3文字が PR: でない場合に実行
				if (!(entry.title.slice(0,3) == 'PR:')) {
 
					var dd = new Date(entry.publishedDate);
					var yearNum = dd.getYear();
					if (yearNum < 2000) yearNum += 1900;
					var date = '<span class="date">' + yearNum + "."+(dd.getMonth()+1)+"."+dd.getDate()+"</span>";
					rsshtml += '
	<li><a href="' + entry.link + '" title="' + entry.title + ' target="blank">'  + date + '<span class="entryTitle">' + entry.title + '</span></a></li>
';
					// PRを省いた表示カウントを追加
					entryPrintCount++;
				}
			}
 
		var rssdata = document.getElementById("blogEntries");
		rssdata.innerHTML = rsshtml;
		}
	});
}
google.setOnLoadCallback(initialize);
// ]]></script>
<!-- /ブログの新着情報をRSSで読み込む -->

これをheadに貼り付けて、実際に表示したい場所には

<ul class="entryList" id="blogEntries">
</ul>

こんな感じ。
余談ですが、トップページだけに表示する場合が殆どだと思うので、headタグに記載するのもトップページだけにしましょう。
更に余談ですが、

var rssdata = document.getElementById(“blogEntries”);
rssdata.innerHTML = rsshtml;

で、idが blogEntries で囲まれてるところに流し込んでるんですね。
javascript面白いなぁ・・・。

※超絶初心者のコードにつきツッコミどころは指摘よろしくお願いいたします。

アメブロの新着情報を広告(PR)無しでサイトに表示する

ブログの新着情報を他のサイトに表示したい時ってありますよね。
そういう場合はブログのRSS情報を利用して表示するのですが、困るのがアメブロ。
RSSに広告が紛れ込んでます。
広告記事の入っているRSSを利用してサイトに表示させれば・・・
当然サイトにも広告が表示されてしまいます。

例)

まぁ・・・広告があるから無料で使わせていただいているわけですが・・・。

とりあえずこの PR が含まれている記事を表示しないようにするコードです。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
$xml = simplexml_load_file(★ブログのRSS★); 
$count = 0;
echo '<ul class="entryList">';    
foreach($xml->channel->item as $entry){
// アメブロの広告対策
$entryTitJudge = mb_substr( $entry->title, 0, 3 ); // 先頭3文字でトリム
if (!($entryTitJudge == 'PR:')) { // 先頭3文字がPR:でない記事のみ表示
	 $entrydate = date ( "Y.m.d",strtotime ( $entry->pubDate ) );
	 echo '<li><span class="infoDate">'.$entrydate.'</span>';
	 echo '<span class="infoTxt"><a href="'.$entry->link.'" target="_blank">'.$entry->title.'</a></span></li>';
	 $count++;
}
 if ($count > 4){break;}
}
echo "</ul>";
?>

広告の場合はタイトルの最初に PR: が含まれているので、 PR: の時は表示しなければOKですね。

WordPressで本文に入力した内容をコメントアウトする

一度公開した内容だけれども、一時的にコメントアウトしたい時ってありますよね。
htmlならば<!– –>

でいけるのですが、WordPressの場合は仕様上コメントアウトが使えません。
困ったなぁと思って調べてみたら、同じ動作が出来る方法が書いてありました。

WordPress の本文内にショートコードでコメントアウトを埋め込む方法

functions.phpに下記を追加して


function ignore_shortcode( $atts, $content = null ) {
return null;
}
add_shortcode('ignore', 'ignore_shortcode');

本文欄でコメントアウトしたい箇所を[ignore][/ignore]でくくると、同じ効果が得られます。

ショートコードってこういう使い方もあるんですね。

さっそくBizVektorにも実装しました( ̄ー ̄)b

カスタムフィールドに入力した値の改行

WordPressでカスタムフィールドを頻繁に使いますが、この入力欄に入力したテキストについて改行を反映させたい場合、2種類の記述方法があります。

自動的にPタグでマークアップする

1
<?php echo wpautop(post_custom('カスタムフィールドの値')); ?>

自動的にBRタグを挿入するだけでPタグなどの自動整形はしない。

1
<?php echo nl2br(get_post_meta($post->ID,'カスタムフィールドの値',true)); ?>

All-in-One Event Calendar Plugin 日本語化ファイル

WordPress用イベントカレンダーのプラグインはいろいろ出ています。
一番有名なのは Event cakender 3 ですが、 Event cakender 3は投稿のカテゴリーの中に「イベント」に該当するカテゴリーを設定するので自分の求める用途では使いにくいなと思ってたところ、All-in-One Event Calendar Pluginが一番使いやすそうでした。

が・・・

日本語化ファイルが無い・・・orz

と、言うことで、日本語化ファイルを作りました。

まだ英語のままの部分もありますが、無いよりはずいぶんマシだと思うので公開します。

All-in-One Event Calendar Plugin 日本語化ファイル
2011.10.09 all-in-one-event-calendar-ja_000.zip
2011.10.11 all-in-one-event-calendar-ja_001.zip UP!!

使い方

フォルダの中身を展開して、
all-in-one-event-calendar-ja.mo
all-in-one-event-calendar-ja.po

all-in-one-event-calendar/language/
フォルダにアップロードすればOKです。

補足事項

All-in-One Event Calendar Plugin 1.0.9 では下記の場所にバグがあります。

/all-in-one-event-calendar/app/controller/class-ai1ec-events-controller.php
の407行目

$rrule = ‘FREQ=DAILY;BYDAY=SA+SU’;

の箇所を

$rrule = ‘FREQ=DAILY;BYDAY=SA,SU’;

にしないと、イベントの「繰り返し」を「毎週末」にした時にエラーになってしまいます。

ウェブ屋が震災で出来そうな事を考えてみた。

東日本大震災で何か出来ない事はないか考えてたんだけど既に誰かが作ったものを作っても、情報が乱立するだけなので、それらを除けば、震災発生以来これといって特別な事は思いつかなかったのだけど、ニュースを見ていてこんなのはどうかと思うので、意見伺いと、よさそうなら開発・運営要員を募りたいと思う。

■提案サイト
東日本大震災での遺品や瓦礫の中にある写真などの残留物の写真をアップロード・閲覧出来るウェブサイト

■趣旨
瓦礫の中から市役所・役場の職員が回収した品物、これらは回収した各役場などに保管・展示されており、被災者・遺族がそれぞれ探しに来るが、これらは以下の問題がある。

・津波の規模が大きかった為、数箇所回らないといいけない。
 しかし、確認しに行くには燃料・労力・時間を要する。
・役場もいつまでも並べておくわけにはいかない。

■必要と思われる成果物
・PCサイト
・ガラケー版サイト
・スマートフォン版サイト
・使い方解説ページ(サイト)

■必要と思われる機能
・誰でも(各地域の役場・ボランティアの人)ユーザー登録出来て写真をアップロード
・PCサイトは勿論スマートフォン、ガラケーからも閲覧・投稿
・地域や種類、管理場所などを登録しておけばユーザーも管理者も探しやすいかなと。
・各写真に問い合わせ連絡先(登録したユーザーの電話番号など)を掲載

■あると望ましい機能
・不適切画像・情報の通報

■必要な人員
・PCサイト構築スタッフ(IT技術者)
・ガラケー用テンプレ制作スタッフ(IT技術者)
・スマホ用テンプレ制作スタッフ(IT技術者)
・使い方解説ページ(サイト) ITリテラシー低い人向けなのでこれが結構難しいかも。
※WordPressベースでの開発想定
・ウェブデザイナー
 (凝る必要はないと思うので、部分的なパーツ作成がメインかな)
・こんなサイトがありますと各関係機関に告知する為に、告知先リストの作成と連絡スタッフ
 ツイッターとかで拡散はしてもらうにせよ、直接連絡やプレスリリースは必要かなと。

■必要な運営要員
・不適切画像が投稿された時に対応・削除するスタッフ
・使い方をサポートするスタッフ

投稿作業は労力やITリテラシーが少し必要かもしれないけど、そういう作業こそ現地ボランティアに向くのかなと期待したり・・・。

で、もう震災から随分日が経ってるので、すぐに作れないんだったら、サイトの存在意義が無いような気がするので、今週末(つまり今日?明日)で、『作業分担してやるぞもらぁ!』って人が少なくとも3名以上集まらなければまぁあんましなぁ・・・

今週末で作れないんだったら現実的じゃないかなって思ってますがどうですかね?

カスタム投稿タイプのRSS

カスタム投稿タイプを作った場合、そのRSSフィードだけも出力したいと思います。
カスタム投稿タイプを設定しただけではRSSフィードには入らないので、function.phpに下記を追記します。

1
2
3
4
5
6
7
8
// RSSの追加
function my_get_posts( $query ) {
    if ( is_feed() ) {
        $query->set( 'post_type', array('info') ); // カスタム投稿タイプ'info'を追加した場合
        return $query;
    }
}
add_filter( 'pre_get_posts', 'my_get_posts' );

出力されるRSSのURL

公開URL/feed?post_type=info

the_excerpt(抜粋・概要)タグでpタグを除外する方法。

抜粋欄に記入されている内容(記入されていない場合は本文最初の数文字)を表示するthe_excerptタグですが、大変親切な事に勝手にpタグを入れてくれます。

と、なると、抜粋を表示してそこにパーマリンクを指定しようとするとpタグの外にaタグになるのでhtml上よろしくなかったり、metaのdescriptionに使いたいのに中にpタグが入るなんて事になってしまうので、都合が悪いです。

調べたところこちらのサイトで紹介されていました。

function.phpに

1
2
3
4
<?php
    // pタグ自動挿入解除
    remove_filter('the_excerpt', 'wpautop');
?>

を追加すれば解除できます。

ちなみにwp-includes/default-filters.phpを触る方法もありますが、こちらはWordPress本体のアップデートで上書きされてしまうのでお勧めしません。