2017年4月の記事（4件）

WordPress のメールフォームプラグイン「MW WP Form」のセレクトボックスで、先頭に「選択してください」と表示してこれを空欄とみなす方法として、サポートフォーラム等で紹介されている方法は、次のように JavaScript を使う方法です。

管理画面でセレクトボックスを配置するときに

[mwform_select name="hoge" children=",山,海,川"]

のような感じでchildrenの最初に , を入れます。
これでvalueが空の項目が追加されます。
このままだと「選択してください」の表示がされないので、JavaScriptを使い

<script type="text/javascript">
jQuery( function( $ ) {
  $( '#mw_wp_form_mw-wp-form-710 select option[value=""]' )
  .html( '選択してください。' );
} );
</script>

としてやると表示されるようになります（セレクタは適当に合わせてください）。

ただ、これだと option 要素の内容（label）がないので HTML5 の文法的にはバリデーションエラーとなります。もっとも、MW WP Form では form 要素の action 属性の値が空なので、ここもバリデーションエラーとなるのですが。

で、いろいろ試していたら、MW WP Form の機能だけで簡単に、先頭に「選択してください」と表示してこれを空欄とみなす処理ができることがわかりました。

“MW WP Form のセレクトボックスで「選択してください」を空欄とみなす最も簡単な方法（JavaScript 非使用）” の続きを読む »

WordPress の管理画面は、以前よく使ってた Movable Type や他の CMS に比べても、とても分かりやすく出来ていると思いますが、さらに使いやすくするために、案件に応じて不要なメニュー項目を削除したり、逆に投稿一覧画面などにはあったら便利という項目を表示させたりしています。

今回、編集者にカスタムメニューの操作権限を与える必要がありました。

まず、通常編集者はカスタムメニューを操作することはできないので、functions.php に以下を記述して操作権限を与えます。

function add_theme_caps(){
  $role = get_role( 'editor' );
  $role->add_cap( 'edit_theme_options' );
}
add_action( 'admin_init', 'add_theme_caps' );

これで編集者にも［外観］メニューが表示されますが、［テーマ］や［カスタマイズ］などのサブメニューは操作してほしくないのでこれらを消す必要がありましたが、この内［カスタマイズ］については他のサブメニューと URL の形式が異なるため、ちょっと工夫が必要でした。

“管理画面のメニューから［外観］→［カスタマイズ］を消す” の続きを読む »

近年、スマホ等で閲覧した際のユーザビリティを考慮して、クリックやタップできるリンク範囲を広げる手法がよく使われています。

• HTML5 で複数のブロック要素を a 要素で囲む方法
• CSS の position プロパティを使って a 要素を直前のブロック要素に被せる方法
• jQuery を使って a 要素を含むブロック要素のクリックに反応させる方法

などありますが、jQuery を使う方法は私もよく使います。

以前から多くのブログ等で紹介されている記述は次のようなものです。

$(function(){
  $('div.linkBox').click(function(){
    window.location = $(this).find('a').attr('href');
    return false;
  });
});

ただ、この方法は本来のリンク要素外の範囲では、リンク先を新しいタブで開くキーボードショートカットに反応しません。Windows では [ctrl] キーを、Mac では [command] キーを押しながらクリックすると、リンク先が新しいタブで開くというものです。

“リンクエリアをブロック要素全体に広げ、新しいタブで開くキーボードショートカットに対応する” の続きを読む »

学校等のサイトを構築する際に必要になることがある年度別アーカイブ。Movable Type では FiscalYearlyArchives というプラグインを使って簡単に作成できましたが、今回 WordPress で作成する必要があり、いくつかの記事を参考にさせていただきながら構築できました。

まずは、年度別アーカイブリストの出力です。これはこちらの記事を参考にさせていただきました。
[WordPress] 年度別（4月から始まる）アーカイブリストを表示する | 制作メモ | 560DESIGNS

この記事で紹介されているコードを functions.php に記述しておき、<?php my_get_archives_by_fiscal_year(); ?> で年度別アーカイブリストを出力します。

続いて、年度別アーカイブページの作成。こちらは、サポートフォーラムの以下のトピックを参考にさせていただきました。
トピック: 年度別アーカイブは可能でしょうか？ «  サポートフォーラム — WordPress

年別アーカイブは不要なので、年毎の表示を年度毎にそっくり入れ替えるこの方法で、年度別アーカイブページが生成できました。

そしてここからは、出力されたアーカイブタイトルなどの調整です。

“年度別アーカイブの作成” の続きを読む »