WordPressのページの順番をドラックドロップで変更、子ページの階層を畳んで見やすくするプラグイン

WordPressのページを、たくさん作り階層なども作って管理しているとなかなか大変です。

子ページをたくさん作るとリストが見にくくなったり、順番を任意に変更したくなった時に使いやすくなるプラグインを導入します。

ja.wordpress.org

同様にドラックドロップと階層を閉じる機能があるプラグインに Nested Pages というプラグインがあります。

こちらは、管理画面のページのリスト表示を直接書き換えます。
CMS Tree Page Viewは、固定ページのリストとは別に管理画面に新しくページが追加され、そちらで操作できます。

Nested Pages も洗練されたインターフェイスで使いやすいのですが、他のプラグインとの干渉やリストページにカストマイズしたい場合などを考慮して、個人的には別のページのほうが好みですのでCMS Tree Page Viewを使っています。

CMS Tree Page Viewをインストールしてアクティブにすると、ページの管理画面に「ツリー表示」というメニューが追加されます。

このページは、図にようなツリー表示のページガ追加されます。

各ページのアイコンの上にカーソルを合わせると、十時カーソルになりドラックドロップで順番を変更できます。

ポップアップメニューが表示され、編集や表示、追加、階層移動などが選択できます。

子ページがある場合、左にアイコンで、階層の開閉が可能です。

ページ数が増えたり子ページのネスト構造が多くなり、管理画面のリストが見にくくなった場合に使用すると使いやすくなります。

MW Formで特定のsubjectのメールはHTMLメールにする

MW Formをつかっている時に、返信をHTMLメールにしてリンクや改行などを指定したい場合に以下のように内容を functions.phpに追記します。

HTMLメールにしたいメールのサブジェクトが「お問合せ受付」の時に、以下のようになります。

add_filter('wp_mail', 'return_html_mails', 10,1);
function return_html_mails($args){
  $headers = isset($args['headers'])?$args['headers']:;
  if (($args['subject']) === "お問合せ受付") {
    if (is_array($headers)) {
      $headers = 'Content-Type: text/html; charset=UTF-8';
    } elseif (is_string($headers)) {
      $headers = $headers . ($headers?"\r\n":"") . 'Content-Type: text/html; charset=UTF-8';
    }
  }
  $args['headers'] = $headers;
  return $args;
}

返信の本文のところで

HP：<a href="https://www.yahoo.co.jp">https://www.yahoo.co.jp</a><br>

のように、HTMLを使う事が可能になります。

WordPressでオリジナルのコンテンツブロックをプラグインで作る

コンテンツの管理を顧客に渡す場合は、それぞれのスタイルをあらかじめ適用したコンテンツを記事に挿入できるオリジナルのブロックを作りたい時にプラグイン「Genesis Custom Blocks」を使います。

管理画面のプラグインページでGenesis Custom Blocksをインストールします。

管理画面にGenesis Blocksのメニューが追加されているので、Add Newを選択します。

シンプルなコンテンツブロックを作ります。

タイトルをslugを入力します。

メニューに表示されるアイコンを選択します。

ブロックを入れるカテゴリーを選択するか「Add New Category」で追加します。

検索用のKeywordsを任意で入れます。

「Open block fields in a modal instead of rendering in place」をオンにすると編集画面で別ウインドウで入力できます。

Post Typesで投稿、固定ページのどちらでも使うかどうかをチェックします。

フィールドを追加していきます。
「Editor Fields」「Inspector Fields」のタブがありますが、Editorはクリックして編集画面に表示され、Inspectorは入力フィールドがサイドバーに表示されます。

この例ではEditor Fieldsで作っていきます。

「＋」ボタンで追加します。

サイドバーで、追加されたフィールドのラベル、slug、入力タイプなどを設定します。

3つのフィールド、thumbという画像、bodyというtextareaも合わせて作ります。

公開ボタンをクリックします。

ガイドが表示されます。

現在のアクティブテーマの階層にblockというフォルダの中にblock-feature.phpというファイルを作成します。

block-feature.phpのコードに、表示するコードを記述します。

各フィールドの値は

block_field( スラッグ名 )で取得できます。

<div class="feature-wrapper">
    <div class="cell">
        <img src="<?php block_field( 'thumb' ); ?>">
    </div>
    <div class="cell">
        <h3><?php block_field( 'main-title' ); ?></h3>
        <p><?php block_field( 'body' ); ?></p>
    </div>
</div>

最低限でこういったコードをblock-feature.phpに設定します。
block_field()で出力までしますので、値を置換したり、空かどうか判断するにはblock_field(slug,false)を使います。

if(!empty(block_field( 'thumb',false )){}

などでエラー処理を加えます。

投稿に追加してみます。

ブロック挿入を表示すると、新たなブロックが追加されていますので挿入します。

画面にそれぞれの入力フィールドが表示されます。

<div class="feature-wrapper">
    <div class="cell">
        <img src="http://www.sample.com/wp-content/uploads/2022/06/sean.jpg">
    </div>
    <div class="cell">
        <h3>美しい海岸</h3>
        <p>日本国内のさまざまな美しいビーチを紹介。宿泊、アクセス、絶景ビューポイントも合わせて紹介します。</p>
    </div>
</div>

コンテンツがテンプレートコードに従って挿入されます。

WooCommerceで注文情報をCSVやエクセルに書き出す。

WooCommerceの注文情報を利用したり、検討や分析、まとめたりするのに書き出したい時に使えるプラグインが

Advanced Order Export For WooCommerceです。

インストールするとWooCommerceのメニューの中にExport Ordersのメニューが追加されます。

メニューをクリックすると、書き出しのための設定が表示されます。

無料だとExport now、Tools、helpだけがアクティブです。

まず、Filter orders byで

Order Date ：注文

Modification Date：ステータスを変更した日

Paid Date：支払日

Completed Date：完了日

また、必要に応じてDate rangeに開始と終了日を入れて日付を絞ります。

Summaryはチェックボックスで。、レポートを商品ベースか顧客ベースかに選択出来ます。

ファイル名をExport filenameで決定します。

日付の使い方などは、supported tagsを参照ください。

Date、Timeのプルダウンからも選択できます。

Formatで出力するファイル形式を選択できます。

Sort orders byで、出力したデータの並び順を変更できます。

最後に一番下部のExportをクリックするとデータがダウンロードされます。

Save settingでは、いろいろ決めた設定が保存されます。

公開前やメンテ中のベーシック認証かけたサイトでLet's Encryptだけを先に通す。

公開前やメンテ中、検索のRobotに拾われたり閲覧できないようにするのにベーシック認証は手軽でよく使う方法です。

<Location / >
  AuthType Basic
  AuthName "Input ID "
  AuthUserFile /var/www/.htpasswd
  Require user foo
</Location>

サイトを制作途中に、公開前にSSLのLet's Encryptだけは先に通しておきたい場合があります。ただ上記のベーシック認証をかけていると承認に失敗します。

それは、承認用にアップロードしたファイルがリターンで読み取れないために失敗するので、アップロードしたファオルの部分だけベーシック認証をエスケープする必要があります。

<Location /.well-known/acme-challenge > 
 Require all granted
</Location>

Let's Encryptが使うパスだけは、接続をすべて許可します。

場合のよっては、リファラーやブラウザなど
SetEnvIfで、複雑な認証を設けている場合もあるでしょう。

SetEnvIf Host "^subdomain\." host_ok
order deny,allow
deny from all
allow from env=host_ok

そういった場合も、Request_URIで該当のURLだけ認証を通します。

SetEnvIf Host "^subdomain\." host_ok
SetEnvIf Request_URI "/.well-known/acme-challenge*" ref_ok
order deny,allow
deny from all
allow from env=host_ok

それにより認証や更新も問題なく運用できます。

WordPressで子ページ一覧の表示を１階層だけに絞る

現在のページの子ページ一覧を表示するのはプラグインも提供されています。

CC Child Pages – WordPress プラグイン | WordPress.org 日本語

CC Child Pagesをインストールすると

[child_pages]

というショートコードを入れるだけで、そのページの子ページ一覧を出力してくれます。

カラムを分けたり特定のページを省いたり、いろいろな使い方があるので解説を見てください。

queryでも簡単に取得できます。 現在のページを

global $post;

で取得して

$getpages = get_pages(array(
'child_of' =>$post->ID,
'number'=>0,
'sort_column'=>'menu_order',
'sort_order' => 'asc',
));

で、子ページ一覧を取得できます。

foreachで取り出せば子ページのリストやコンテンツサマリーを表示できます。

ただ固定ページを階層をいくつか設けて使いたいときに、このqueryでは孫ページや、下の階層のページ全てが表示されてしまいます。 階層をうまく使いページを構成したい時に、自分のページの直下の一覧だけのリストが欲しい時などは次のqueryで取得することができる。

$getpages = get_pages(array(
'child_of' =>$post->ID,
'parent' => $post->ID,
'number'=>0,
'sort_column'=>'menu_order',
'sort_order' => 'asc',
));

'parent' => $post->ID で、自分の子ページでありながら、かつ親ページも自分という条件を指定します。 これにより

トップページ
  L　一覧 // 作品A,B,C
    L　作品A
    L　作品B
    L　作品C // 作品C-1,C-2
      L　作品群C-1
      L　作品群C-2

という表示が可能になります。

functions.phpに自分でショートコードで登録しておくとさらに便利に使う事ができます。

WordPress5.9へのアップデートでログイン画面に自動で追加されたLanguage Switcherを非表示にする

最新のWordPress5.9へアップデートした時に、クライアントにこれいらないと言われるかもしれない機能。ログイン画面に言語切り換えのプルダウンが追加されます。

日本語だけで運用していて必要ない場合これを非表示にするには

functions.phpに以下のコードを追加します。

add_filter( 'login_display_language_dropdown', '__return_false' );

ログイン画面の言語切り換えのプルダウンが非表示になります。