【WordPress】ダッシュボード上で注意書き等のアナウンスを表示する。

夏真っ盛りですね!システム部のヒライです。

システムが絡むウェブサイトを納品する場合、クライアントに対し使い方の説明を行いますよね。 口頭で説明後に説明書なんかをお渡しするケースがほとんどだと思います。

複雑な機能の説明は時間をとって行うべきではありますが、 基本的な使い方や、よくある質問のようなスタンダードな情報を何度も説明すると結構時間を食ってしまいますよね。

そんな時、WordPressを使っていれば、簡単に管理画面上で使い方説明を表示することが可能です。

管理画面ログイン後に表示される「ダッシュボード」上に使い方を乗せてみましょう。 functions.phpへ以下を書き込みます。

[php]
function dashboard_widget_function() {
// 説明文を記入
echo ‘新着情報一覧にお知らせを表示する場合は、<a href="/wp-admin/edit.php">左メニューの【投稿 > 新規追加】</a>から行って下さい。<br>’;
echo ‘説明文テキスト説明文テキスト説明文テキスト説明文テキスト<br>’;
}

function add_dashboard_widgets() {
// 説明文の見出し名
wp_add_dashboard_widget(‘dashboard_widget’, ‘管理画面の使い方’, ‘dashboard_widget_function’);
}

add_action(‘wp_dashboard_setup’, ‘add_dashboard_widgets’ );
[/php]

ダッシュボードを見てみる。

ダッシュボード

使い方が表示されましたね! 以上のようにダッシュボード上に表示しておくことで、クライアント様への使い方説明の時間を短縮できるのではないでしょうか。

[WordPress]公開済みの古い記事上に注意文を表示する。

ブログなんかで、「この記事は古いですよ」的なアナウンスをしている記事、ありますよね。

七夕ですね!システム部のヒライでございます。

デザインツールの使い方や技術系の解説、ブログ等を読んでいると、「この記事の内容は最新でない可能性があります」的な注意書きが目につきますよね。
書いた当時は最新の情報ですが、日がたつにつれその内容が正しくなくなる可能性もあるわけでして、
記事を読みに来られたユーザーさんへのとても良い配慮になると思います。

この様な注意書きですが、WordPressでは一瞬で出来ちゃいます。

投稿日が1年以上前の記事に注意書きを表示する。

サンプルとして、まずは適当に投稿日を古くした記事を作ってみます。

1

お使いのテーマ内にあるsingle.phpを開き、注意書きを表示されたい場所に以下を差し込みます。

[php]
<?php
// 投稿日が1年以上前であれば表示する
if( date(‘U’) – get_the_time(‘U’) > 60*60*24*365 ) {
?>
<!– ↓ここにhtmlで注意書きを入力 –>
<div style="background: #FFEDED; border: solid 1px #B84749; color: #B84749; padding: 10px; font-weight: bold; margin-bottom: 20px;">
<p>本記事は<?php the_time(‘Y年n月j日’) ?>に投稿されました。<br>現在の状況とは違う可能性があることをご了承下の上、お読み下さい。</p>
</div>
<?php
}
?>
[/php]

これで、投稿日が1年以上前の記事のみに注意書きが表示されます。
1年では長すぎるので短くしたい、等の場合は2行目の「365」を変更すればOKです。(30にしたら30日以上前となります)

それでは同じ記事を表示してみます。

2

一目で古い記事なんだなとわかるようになりました。
というわけで私もブログを書くようなことがあれば積極的に使おうと思います。

[PHP]タイトルや本文に文字数制限して表示する場合に、出来るだけ終了地点を揃える。

タイトルのセンスがなさすぎて辛い…。

うまく伝える魅力的なタイトルが思い浮かびませんでした、システム部のヒライです。
端的に言いますと、WordPress等の記事一覧ページで、タイトルやら本文を省略して表示する場合に、それぞれの終点を揃えたいということです。

mb_substr()を使う。

文字数制限なんかで探しますとmb_substr()という関数が引っかかります。

75文字で省略し、最後に「…」を付けてみます。

mb_substr

 

・・・美しくない。

 

終わりに表示している「…」の位置がずれていてキレイじゃありません。

そんなときはmb_strimwidth()を使います。

こちらも同じく75文字で省略し、最後に「…」を付けてみます。

mb_strimwidth

 

・・・美しい。

 

終わりの「…」の位置が揃っています。大変キレイです。

mb_substr()とmb_strimwidth()の違い。

mb_substr()は全角文字列と半角文字列を判別せず、1文字としてカウントするのに対し、
mb_strimwidth()は全角なら2文字、半角なら1文字としてカウントしてくれるので、終了地点があまりズレないということですね、とても優秀です。

冒頭の話に戻り、例えばWordPress上でタイトルを省略しつつ、且つ終点を揃える場合。

[php]// 第一引数にタイトル、第二に始点(0文字目から)、第三に終点(100バイト分の文字)、第四に終点に付け加える文字列、第五に文字コード
<?php echo mb_strimwidth($post->post_title, 0, 100, "…", "UTF-8"); ?>[/php]

※mb_strimwidthについて詳しく知りたい方はこちらをご覧下さい。

一覧画面上に複数出ているタイトルや本文の終わりを揃えたいとお考えの方、ぜひお試し頂ければと思います。

【WordPress】テキストエディタのクイックタグをカスタマイズする。

システム部のヒライです。

WordPressを利用されている皆様、記事投稿の際にテキストエディタとビジュアルエディタ、どちらをお使いでしょうか?

慣れている方はテキストエディタを利用されているのかなと漠然とイメージしておりますが、
本記事はエディタに備わっているクイックタグの種類を増やして便利にしちゃおうという趣旨となります。

クイックタグとは

クイックタグはテキストエディタ上部に配置されているボタンです。
クリックすることで対応したhtmlタグが挿入されます。

テキストエディタ1

複数名で記事投稿をしている場合でも、似たようなhtmlタグ構成(記事の構成)に出来ますし、
htmlに慣れていない方でもボタンをポチっとするだけで淡々とhtmlタグを使える代物です。

自前のクイックタグを追加する

せっかくなのでhtmlの要素にclassを付けたタグを表示したいと思います。
まずはWordPress上で使っているcssファイル(style.css等)にスタイルを書き込みます。

[php]
/*太字*/
.area_gray{
background: #eeeeee;
}

/*赤色*/
.red{
color: #ff0000;
}
[/php]

次に、functions.phpに以下を記入します。
[php]
<?php
function addMyQuicktags(){
?>
<script type="text/javascript">
QTags.addButton(‘back_gray’,’背景(グレー)’,'<div class="area_gray">’,'</div>’);
QTags.addButton(‘text_red’,’文字色(赤)’,'<span class="text_red">’,'</span>’);
</script>
<?php
}
add_action(‘admin_print_footer_scripts’,’addMyQuicktags’);
?>
[/php]

QTags.addButton()内にいろいろと引数を設定するのですが、大切なのは以下です。
[php]
// 左から順に任意のID、ラベル(表示される名前)、開始タグ、終了タグ
QTags.addButton(‘back_gray’,’背景(グレー)’,'<div class="area_bray">’,'</div>’);
[/php]
※他の引数も設定すると表示順を変更したりも出来ます。
※詳細→クイックタグAPI
これだけ設定しておけばOKなので、保存して投稿画面を表示してみましょう。

投稿画面を表示してみる。

テキストエディタ2

追加されたクイックタグとポチポチしてみます。

テキストエディタ3

設定したタグがバッチリ表示されていますね。これで完了です。
これで記事投稿をすれば、最初に設定したcssの通りに表示がなされるという寸法です。

この様によく使うhtmlタグや、場合によっては文字列等をクイックタグ化しておけば、
記事投稿をよりスムーズに行うことが出来るのではないでしょうか。