WordPressの投稿画面で「この投稿を先頭に固定表示」チェックボックスを非表示

だいぶ間が空いてしまいました。
ちょっと余裕出てきたシステム?の渋谷です。

WordPressの知識を増やすためにWordpressのプラグイン作ろうか、ってことで一つ簡単に作ってみることにしました。
ネタ不足にならないようにシリーズでお届けできたらなぁと考えてます。

プラグインが実務上使えることは前提ですが、あくまで勉強のためなのでよそのプラグインと機能が被ったりするのは気にしないことにします。

「この投稿を先頭に固定表示」チェックボックス

stucky

 

いつの間にかについていた機能の「この投稿を先頭に固定表示」…。
WPのバージョンを上げたら表示されるようになって、「この投稿を先頭に固定表示」を押しても先頭に表示されないとクライアントに言われてしまうという機能です。

新規サイトでは対応してしまってもいい機能なんですが、以前からあるサイトでは対応に時間がかかるのでチェックボックスを非表示にすることで問題が起きないようにしました。

作業的には非表示にするjavascriptをアップしてfunction.phpにそのjsファイルを読み込む機能を付け足すだけになります。

ただし、非WP管理サイトが山ほどある場合、いちいちfunction.phpに書いて…jsアップしてとやっているとfunction.phpを別なサイトにアップするリスクがあるので、function.phpに書いていた内容をプラグインにしてみました。

<?php
/**
 * @package Remove Sticky Checkbox
 * @version 1.0.0
 */
/*
  Plugin Name: Remove Sticky Checkbox
  Plugin URI: https://blog.medical-design.co.jp/
  Description: 投稿画面の「この投稿を先頭に固定表示」チェックボックスを非表示にします。
  Author: Medical Design
  Version: 1.0.0
  Author URI: https://www.medical-design.co.jp/
  Text Domain: remove-sticky-checkbox
*/

function remove_sticky_checkbox() {
    echo ‘<script>if(typeof jQuery != “undefined”){jQuery(function(){jQuery(“#sticky-span”).remove();})}</script>’.”\n”;
}
add_action( ‘admin_head’, ‘remove_sticky_checkbox’ );
?>

この内容を書いたphpファイルをフォルダごとプラグインフォルダに突っ込んで回って有効化するだけです。

このプラグインの数少ないポイントはadmin_headで動かしていることでしょうか。
どのタイミングでプラグインを動かすかはプラグイン API/アクションフック一覧に書いてあるのですが、

admin_print_scripts
  管理画面各ページの <head> 要素に JavaScript を追加するために実行する。

最初これで動かしたらjqueryが読み込まれる前、headの前の方に書かれてしまって動きませんでした。
実際に管理画面にプラグインを放り込むとこんな感じ。

stucky2

投稿画面でチェックボックスが消えてくれたことを確認。

stucky3

今回作ったプラグインファイルはこちら

 

 

【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でファイルアップロードの機能におけるセキュリティホールの対策を行った最新版
4.5.2 がリリースされました。

弊社では沢山のサイトを管理させていただいておりますが、WordPressを導入しているサイトも多く
今回のような緊急性の高いセキュリティアップデートのときは一苦労です。

そんなWordPressについての小ネタです。

 カスタム投稿(Custom Post Type)

ブログというよりもCMSとしてWPを使う場合は、通常の投稿メニューでは無く
用途ごとにメニューを設けてそれぞれに適した入力項目を持った管理画面を作ったり、という事がよくあります。

そういった独自のメニューを作るときには「カスタム投稿(Custom Post Type)」という機能を使います。

 カスタム分類(Custom Taxonomy)

通常の投稿メニューとは別にカスタム投稿でメニューを作成したら、
その中でもカテゴリを設けたくなる場合があります。

それを実現するのが「カスタム分類(Custom Taxnomy)」というものです。

 

これらは Custom Post Type UI などのプラグインを使えばどちらも簡単に管理画面からの設定だけで作ることができます。

 

以上を踏まえて今回の本題です。

投稿一覧の画面には以下のようなカテゴリで絞り込むメニューがあると思います

20160527

カスタム投稿の一覧ページだと、カスタム分類を設定しても出てこないんですよね。
でも、検索があれば非常に便利。

ということで調べたところ、以下のようなコードが散見されました。

 

[php]
function add_post_taxonomy_restrict_filter()
{
global $post_type;
if (‘music’ == $post_type) {
$menu = <<<EOH
<select name="genre">
<option value="">カテゴリー指定なし</option>
EOH;
$terms = get_terms(‘genre’);
foreach ($terms as $term) { ?>
$menu .= ‘<option value="’ . $term->slug . ‘">’ . $term->name . ‘</option>’;
}
$menu .= ‘</select>’;

echo $menu;
}
}
add_action(‘restrict_manage_posts’, ‘add_post_taxonomy_restrict_filter’);
[/php]

これを使用しているテーマの function.php に書きましょう、というもの。
この例だと “music” というカスタム投稿で “genre” というカスタムタクソノミーから絞り込みを行う、というものです。
<select>のname属性には絞り込みに使うカスタムタクソノミーを指定するとの事です。

 

しかしこれ、どうもWordPressの4.4.1くらいからはうまく動かないみたいです。
メニューは出てきますがどうも上手く絞り込みがされません。

そこで訂正したものがこちらです。

[php]
function add_post_taxonomy_restrict_filter()
{
global $post_type;
if (‘music’ == $post_type) {
echo ‘<input type="hidden" name="taxonomy" value="music">’;
echo ‘<select name="term">’;
echo ‘ <option value="">カテゴリー指定なし</option>’;

$terms = get_terms(‘music’);
foreach ($terms as $term) {
echo ‘<option value="’ . $term->slug . ‘">’ . $term->name . ‘</option>’;
}
echo ‘</select>’;
}
}
add_action(‘restrict_manage_posts’, ‘add_post_taxonomy_restrict_filter’);

[/php]

変更のポイントは主に2つ

  • カスタム分類名は hidden で渡す
  • <select>のname属性は 検索対象とするキー、つまり “term” を指定する

この修正で上手く行きました。

 

 カスタム投稿、カスタム分類は非常によく使う機能なので、今後は本体で是非サポートしてほしいですね。

それまではこの方法をお試しください。

【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タグや、場合によっては文字列等をクイックタグ化しておけば、
記事投稿をよりスムーズに行うことが出来るのではないでしょうか。

【WordPress】管理画面だけHTTPS接続にする方法

システム部の鈴木です。

前回の投稿からかなり間が空いてしまいましたが、その間も色々とWordPressを活用した案件を担当させていただきました。
その中で対応したものの一つになりますが、管理画面だけHTTPS接続にする方法をご紹介したいと思います。

最近、特に昨年辺りからは常時SSL接続がデファクトになるなどと言われていますが
レンタルサーバを使っている場合などは特に、その対応が難しい場合があります。

例えば

  1. 共用のSSLが使えるけどドメインが変わってしまう
  2. HTTP接続とHTTPS接続でweb公開領域(ドキュメントルート)が分かれている

など、管理画面ではSSLを使いたいけど使えないケースがあると思います。

そこで調べたところ、日本語の情報はあまり無かったのですが
やはり海外には同じ問題を抱えている人がいたようでした。

HTTPS Domain Alias

[browser-shot url=”https://ja.wordpress.org/plugins/https-domain-alias/” width=”600″ height=”450″ href=”https://ja.wordpress.org/plugins/https-domain-alias/”]

使い方は非常に簡単です。

  1. 他のプラグインと同様にプラグインディレクトリに設置
  2. wp-config.php に以下の2行を追加します

[php]
define(‘FORCE_SSL_ADMIN’, true);
define(‘HTTPS_DOMAIN_ALIAS’, ‘example.org’);
[/php]

2行目のドメイン部分は、SSL接続時のドメインを指定します。
httpのときとドメインが変わってもOKです。

たったこれだけ。非常にシンプルで便利です。
今のところWP 4.4系でのみ試していますがバッチリ機能しています。

 

HTTPS接続だけweb公開領域が別になっていて、管理画面だけHTTPSにしたいという場合は
WordPressのインストールディレクトリのエイリアスかシンボリックリンクでも設定してあげればフロント画面はHTTP接続、管理画面側だけはHTTPS接続にする、といった事も可能です。

 

Really Simple CSV Importer を使って Advanced Custom Fields で作ったフィールドを登録する

システム部の鈴木です。
WordPressで多くの投稿を一気にインポートしたい場合、皆様はどうされてますでしょうか?

そんなときに便利なのが、CSVファイルから一気に投稿をインポートできる
Really Simple CSV Importer

ですが、今回は Advanced Custom Fields を使って作成した画像などのメディアアップロードのカスタムフィールドに登録したい場合にどうするか、ちょっと調べてみました
Continue reading

WordPressでドメイン関連の設定を一気に変えたいときのSQL

システム部の鈴木です。

5月に入ってますます暑くなってきましたね。
こういう時こそ、普段なかなか動かせない身体を動かしたいもの。
ということで家から地元の駅までの短い距離ですが、自転車通勤を再開しました。

距離は短いですが、キツめの坂を上って下って、また上って下って上って・・・
の繰り返しなのでなかなか脚にきます。。

冬は防寒してても自転車は寒いのでバスに乗ってましたが
今の時期は気持が良いので、このままちゃんと続けたいものです。

 

さて、今回はWordPressのサイトを別のサーバに移したい場合の子ネタです。

wp_logo


WordPressを別サーバに移動するとき、新サーバ側にはこれらを移動します。

  1. サイトのhtmlドキュメントや画像、プログラム等一式
  2. DB(MySQL)のデータ

それも行ったうえで、wp-config.php で新サーバのDB設定に書き換えたり
新サーバ側での一時的なテスト用にドメインを設定したりといったことをします。

現在のサーバはひとまずそのままにして、移行して一通りの動作確認をしてから
DNSを切り替えるなりして新サーバ側を公開する、ってパターンが多いと思いますが
新サーバ側でテスト用のドメインを設定していた場合に
WordPress の記事ページへのリンクをたどっても元々のドメインのURLで表示されてしまいます。

これはWordPress側で各ページのパーマリンクがDBに記録されているからなのですが、
動作確認をするにはちょっとこれでは作業がしにくいですね。

 

そこで、MySQLで以下のクエリを実行して、一気にパーマリンクなどの設定を変えてしまいましょう。

[php]
UPDATE wp_options SET option_value = REPLACE(option_value, ‘http://hogehoge.com’, ‘http://new.hogehoge.com’);
UPDATE wp_posts SET guid = REPLACE(guid, ‘http://hogehoge.com’, ‘http://new.hogehoge.com’);
[/php]

 

 

2つのSQLがありますが、どちらも'http://hogehoge.com'から'http://new.hogehoge.com'に変更したい場合の例です。

最初のものはWordPress管理画面から設定できるドメインの設定部分を変えるものです。
記事や固定ページなどのパーマリンクは2つ目のSQLで変更します。

これでドメインが変わってもリンクが切れること無くサイトのチェックが行えます。