WordPressでインストールしたプラグインの中には、普段は使わないため無効にしておき、必要なときだけ有効にするものがいくつかありますよね。
サイト運営を続けていると、普段は使わないけれど、何か特別な作業をする時やトラブル時などに使いたいプラグインがだんだん増えてきます。
そのたびにプラグイン一覧画面を開いて操作したり、目的のプラグインを探したりするのが、少し手間に感じることはありませんか？
そんな中で、「ダッシュボードからそのまま管理できたら楽なのに…」と思うことが増えてきました。
そこで今回、ダッシュボードからプラグインの有効・無効や更新ができるツール「Plugin Group Manager」を作ってみました。
グループ分けや一括操作にも対応しているので、プラグインが多い環境でも管理がかなり楽になります。

同じように感じている方は、ぜひ試してみてください。

[wpdm_package id='2422']

特徴・できること

このプラグインでは、主に以下のことができます。

• ダッシュボードからプラグインの有効／無効を切り替え
• 「更新あり」をクリックするだけでアップデートできる
• 一覧画面でプラグインをグループ分けして整理できる
• 一覧画面から複数プラグインをまとめて操作できる
• ページリロードなしで連続更新が可能
• 更新中はスピナー表示で状態が分かりやすい
• 成功・失敗がその場で表示される

特に、ダッシュボードからそのまま操作できるのが一番のポイントです。

使い方

使い方はシンプルです。

1. プラグインをインストールして有効化
2. 各プラグインをグループに割り当て（一覧画面）
3. ダッシュボードに表示される管理UIを確認
4. ダッシュボードまたは一覧から操作

最初に一覧画面で基本設定を行えば、普段はダッシュボードから操作できるようになります。
そのため、わざわざプラグイン一覧を開く機会がかなり減ります。
アップデートも「更新あり」をクリックするだけで、その場で処理されます。

操作は直感的で簡単なため、ここでは細かい説明は省略しますが、以下を参考にしてください。

一覧画面の使い方

左メニューの「プラグイン管理＋」をクリックすると一覧画面が表示されます。
この画面では主に以下の2つを設定します。

• タブ（グループ）の作成
• 各プラグインの割り当て

まずタブの設定を行い、その後プラグイン一覧で個別設定を行います。

タブ設定

タブ設定では、プラグインをグループ分けするための「グループ」を作成します。
ここで作成したタブが、

• ダッシュボードに表示させるかどうか
• 表示順

を決める基準になります。

※ 赤枠部分について
このプラグインでは、アンインストール時のデータ削除を選択できるようになっています。
タブ設定の下にあるチェックをONにすると、プラグイン削除時にタブ設定やプラグインの割り当て情報がすべて削除されます。
OFFの場合はデータは保持されるため、再インストール時に以前の設定をそのまま復元できます。

タブの設定が終わったら、設定エリアは折りたたんでおくこともできます。

プラグイン一覧

この画面では、各プラグインをタブに関連付けていきます（複数選択は不可）。
また、

• メモの登録（用途などの記録）
• 絞り込み・フィルター・検索
• 一括操作

が行えます。

メモを登録しておくと、ダッシュボード上でも内容を確認できるので便利です。
プラグインのアップデートは1件ずつ処理される仕様となっており、ここでは一括アップデートは行えません。

操作後はメッセージが表示され、対象プラグインが

• 成功 → 緑
• 失敗 → 赤

に変化します。
メッセージを閉じると表示も元に戻ります。

ダッシュボード プラグイン管理＋

ダッシュボードでは、よりシンプルに操作ができるようになっています。

• プラグインの有効／無効切り替え
• プラグインの更新
• 一括操作

が行えます。

タブを選択すると、そのタブに紐づいたプラグインが一覧表示されます。
タブの表示は、

• 1〜2番目 → ボタン表示
• 3番目以降 → ドロップダウン

となっています。
また、ダッシュボード上でも

• 一括操作
• メモの確認

ができるため、日常の管理はここだけで完結します。

作後はメッセージが表示され、対象プラグインが

• 成功 → 緑
• 失敗 → 赤

に変化します。
メッセージを閉じると表示も元に戻ります。

注意事項

いくつか注意点があります。

• サーバー環境によってはプラグイン更新に失敗する場合があります
• 更新失敗時はエラーメッセージを確認してください
• プラグインによっては、更新後もバージョン表記が変わらないことがあります
• 一括操作は1件ずつ順番に処理されるため、件数が多い場合は少し時間がかかります
• プラグインの「更新」は個別にい件ずつ行うようようにしてあります（一括更新はできません）

また、通常のWordPressと同様に、重要なサイトでは事前にバックアップを取っておくと安心です。

さいごに

プラグイン管理って地味な作業ですが、少し楽になるだけでもかなり快適になります。

今回の「Plugin Group Manager」は、

• ダッシュボードから操作できる
• グループ分けで整理できる
• 一括操作や更新もまとめてできる

といった感じで、普段の管理をシンプルにしてくれるツールです。

プラグインが増えてきて「ちょっと面倒だな」と感じている方は、ぜひ一度試してみてください。

WordPressテーマ「Cocoon」には、投稿ごとにカスタムCSSやJavaScriptを設定できる便利な機能があります。
記事ごとに少しデザインを調整したいときや、特定のページだけ動きを追加したいときにとても重宝します。
しかも、その投稿を表示する時だけCSSやJavaScriptが読み込まれるため、ブログ全体が重くなりにくいのも大きなメリットです。
私もこの機能をよく使っているのですが、記事数が増えてくると「どの記事にカスタムCSSやJavaScriptを書いたのか分からない…」という問題が出てきました。
確認するには、いちいち投稿を開いて編集画面を見る必要があり、だんだんと面倒に感じるようになります。
そこで今回は、この手間を減らして作業効率を上げるために、投稿一覧画面をカスタマイズしてみました。
といっても難しいものではなく、「カスタムCSSやJavaScriptを設定している記事が一目で分かるようにする」だけのシンプルなものです。
ですがこれだけでも、管理のしやすさはかなり改善されます。

同じように感じている方は、ぜひ参考にしてみてください。

ポップアップでCSS/JavaScriptの内容が確認できるようにしました。
また、簡単な編集も可能に！

追加した機能

• 投稿一覧に「CSS / JS」列を追加
• CSSやJSが設定されている記事の列にCSS/JSの文字を表示
• CSS/JSの文字をクリックで編集画面へ移動
• 該当のCSS/JS欄まで自動スクロール
• フィルター＆並び替え対応

カスタム後の一覧画面

投稿一覧に赤枠の部分の表示が追加されます。

• 絞り込み機能、ソート機能
• CSS/JavaScriptの設定がある場合、★CSS（赤）、★JS（青）が表示される

• 表示された★CSS、★JSをクリックすると別ウィンドウで編集画面が開きCSS/JavaScript欄まで自動スクロール＆展開されます

導入について

子テーマの functions.php に以下のコードを追加してください。
黄色いハイライトの部分を変更するとカラムの位置を変更できます
例：タイトルの後にしたい場合は、'date'を'title'に変更

固定ページには必要ない場合には、青色ハイライト部分を削除

// ==============================
// CSS/JS列 追加
// ==============================
add_filter('manage_posts_columns', function($columns) {
    $new_columns = [];

    foreach ($columns as $key => $value) {
        $new_columns[$key] = $value;

        if ($key === 'date') {
            $new_columns['custom_css_js'] = 'CSS/JS';
        }
    }

    return $new_columns;
});

add_filter('manage_pages_columns', function($columns) {
    $new_columns = [];

    foreach ($columns as $key => $value) {
        $new_columns[$key] = $value;

        if ($key === 'date') {
            $new_columns['custom_css_js'] = 'CSS/JS';
        }
    }

    return $new_columns;
});


// ==============================
// 列の表示（★＋色＋クリックで編集＋スクロール指定）
// ==============================
function add_custom_css_js_column($column_name, $post_id) {
    if ($column_name === 'custom_css_js') {

        $css = get_post_meta($post_id, '_custom_css', true);
        $js  = get_post_meta($post_id, '_custom_js', true);

        $flags = [];
        $edit_link = get_edit_post_link($post_id);

        if (!empty(trim($css))) {
            $flags[] = '<a href="' . esc_url($edit_link . '&scroll=css') . '" target="_blank" title="CSSを編集" style="color:#d63638;font-weight:bold;">★CSS</a>';
        }

        if (!empty(trim($js))) {
            $flags[] = '<a href="' . esc_url($edit_link . '&scroll=js') . '" target="_blank" title="JSを編集" style="color:#2271b1;font-weight:bold;">★JS</a>';
        }

        echo !empty($flags) ? implode('<br>', $flags) : '-';
    }
}

add_action('manage_posts_custom_column', 'add_custom_css_js_column', 10, 2);
add_action('manage_pages_custom_column', 'add_custom_css_js_column', 10, 2);


// ==============================
// フィルター追加
// ==============================
add_action('restrict_manage_posts', function() {
    $selected = $_GET['css_filter'] ?? '';
    ?>
    <select name="css_filter">
        <option value="">CSS/JSすべて</option>
        <option value="css" <?php selected($selected, 'css'); ?>>CSSあり</option>
        <option value="js" <?php selected($selected, 'js'); ?>>JSあり</option>
        <option value="both" <?php selected($selected, 'both'); ?>>CSS + JS</option>
    </select>
    <?php
});


// ==============================
// フィルター処理＋並び替え
// ==============================
add_action('pre_get_posts', function($query) {
    if (!is_admin() || !$query->is_main_query()) return;

    if (!empty($_GET['css_filter'])) {

        $meta_query = [];

        if ($_GET['css_filter'] === 'css') {
            $meta_query[] = [
                'key'     => '_custom_css',
                'compare' => '!=',
                'value'   => ''
            ];
        }

        if ($_GET['css_filter'] === 'js') {
            $meta_query[] = [
                'key'     => '_custom_js',
                'compare' => '!=',
                'value'   => ''
            ];
        }

        if ($_GET['css_filter'] === 'both') {
            $meta_query[] = [
                'relation' => 'AND',
                [
                    'key' => '_custom_css',
                    'compare' => '!=',
                    'value' => ''
                ],
                [
                    'key' => '_custom_js',
                    'compare' => '!=',
                    'value' => ''
                ]
            ];
        }

        $query->set('meta_query', $meta_query);
    }

    // 並び替え
    if ($query->get('orderby') === 'custom_css_js') {
        $query->set('meta_key', '_custom_css');
        $query->set('orderby', 'meta_value');
    }
});


// ==============================
// 並び替え対応
// ==============================
add_filter('manage_edit-post_sortable_columns', function($columns) {
    $columns['custom_css_js'] = 'custom_css_js';
    return $columns;
});

add_filter('manage_edit-page_sortable_columns', function($columns) {
    $columns['custom_css_js'] = 'custom_css_js';
    return $columns;
});


// ==============================
// 編集画面：自動スクロール
// ==============================
add_action('admin_footer', function() {
    $screen = get_current_screen();
    if ($screen->base !== 'post') return;
    ?>

    <script>
    (function() {
        const params = new URLSearchParams(window.location.search);
        const target = params.get('scroll');

        if (!target) return;

        let id = '';
        if (target === 'css') id = 'custom_css';
        if (target === 'js')  id = 'custom_js';

        function openAllMetaBoxes() {
            document.querySelectorAll('.postbox').forEach(box => {
                if (box.classList.contains('closed')) {
                    box.classList.remove('closed');
                }
            });
        }

        function scrollToTarget() {
            const el = document.getElementById(id);
            if (el) {
                el.scrollIntoView({ behavior: 'smooth', block: 'center' });
                el.style.border = '2px solid red';
                el.style.backgroundColor = '#fff8f8';
            } else {
                setTimeout(scrollToTarget, 500);
            }
        }

        // 実行順
        setTimeout(() => {
            openAllMetaBoxes(); // 折りたたみ解除
            scrollToTarget();   // スクロール
        }, 700);

    })();
    </script>

    <?php
});

※ カスタム投稿一覧にも表示されるようになっています。

追加機能

一覧画面でせっかくなのでカスタムCSS/JavaScriptの内容が確認できる方が便利なので表示できるようにしました。

CSS/JavaScriptの内容表示

マウスオーバーで表示、一部のみ表示されますが、”全文”で全ての内容を表示することが出来ます。
また、コピーボタンでコード全体のコピーができます。

// ==============================
// CSS/JS列 追加
// ==============================
add_filter('manage_posts_columns', function($columns) {
    $new_columns = [];
    foreach ($columns as $key => $value) {
        $new_columns[$key] = $value;
        if ($key === 'date') {
            $new_columns['custom_css_js'] = 'CSS/JS';
        }
    }
    return $new_columns;
});

add_filter('manage_pages_columns', function($columns) {
    $new_columns = [];
    foreach ($columns as $key => $value) {
        $new_columns[$key] = $value;
        if ($key === 'date') {
            $new_columns['custom_css_js'] = 'CSS/JS';
        }
    }
    return $new_columns;
});

// ==============================
// 列の表示（クリック＋プレビュー対応）
// ==============================
function add_custom_css_js_column($column_name, $post_id) {
    if ($column_name === 'custom_css_js') {

        $css = get_post_meta($post_id, '_custom_css', true);
        $js  = get_post_meta($post_id, '_custom_js', true);

        $flags = [];
        $edit_link = get_edit_post_link($post_id);

        if (!empty(trim($css))) {
            $preview = mb_substr($css, 0, 120);
            $flags[] = '<a href="' . esc_url($edit_link . '&scroll=css') . '" target="_blank"
                class="code-preview css"
                data-full="' . esc_attr($css) . '"
                data-preview="' . esc_attr($preview) . '"
                style="color:#d63638;font-weight:bold;">★CSS</a>';
        }

        if (!empty(trim($js))) {
            $preview = mb_substr($js, 0, 120);
            $flags[] = '<a href="' . esc_url($edit_link . '&scroll=js') . '" target="_blank"
                class="code-preview js"
                data-full="' . esc_attr($js) . '"
                data-preview="' . esc_attr($preview) . '"
                style="color:#2271b1;font-weight:bold;">★JS</a>';
        }

        echo !empty($flags) ? implode('<br>', $flags) : '-';
    }
}

add_action('manage_posts_custom_column', 'add_custom_css_js_column', 10, 2);
add_action('manage_pages_custom_column', 'add_custom_css_js_column', 10, 2);


// ==============================
// フィルター
// ==============================
add_action('restrict_manage_posts', function() {
    $selected = $_GET['css_filter'] ?? '';
    ?>
    <select name="css_filter">
        <option value="">CSS/JSすべて</option>
        <option value="css" <?php selected($selected, 'css'); ?>>CSSあり</option>
        <option value="js" <?php selected($selected, 'js'); ?>>JSあり</option>
        <option value="both" <?php selected($selected, 'both'); ?>>CSS + JS</option>
    </select>
    <?php
});

// ==============================
// フィルター処理＋並び替え
// ==============================
add_action('pre_get_posts', function($query) {
    if (!is_admin() || !$query->is_main_query()) return;

    if (!empty($_GET['css_filter'])) {

        $meta_query = [];

        if ($_GET['css_filter'] === 'css') {
            $meta_query[] = [
                'key' => '_custom_css',
                'compare' => '!=',
                'value' => ''
            ];
        }

        if ($_GET['css_filter'] === 'js') {
            $meta_query[] = [
                'key' => '_custom_js',
                'compare' => '!=',
                'value' => ''
            ];
        }

        if ($_GET['css_filter'] === 'both') {
            $meta_query[] = [
                'relation' => 'AND',
                [
                    'key' => '_custom_css',
                    'compare' => '!=',
                    'value' => ''
                ],
                [
                    'key' => '_custom_js',
                    'compare' => '!=',
                    'value' => ''
                ]
            ];
        }

        $query->set('meta_query', $meta_query);
    }

    if ($query->get('orderby') === 'custom_css_js') {
        $query->set('meta_key', '_custom_css');
        $query->set('orderby', 'meta_value');
    }
});

// ==============================
// 並び替え
// ==============================
add_filter('manage_edit-post_sortable_columns', function($columns) {
    $columns['custom_css_js'] = 'custom_css_js';
    return $columns;
});

add_filter('manage_edit-page_sortable_columns', function($columns) {
    $columns['custom_css_js'] = 'custom_css_js';
    return $columns;
});


// ==============================
// 編集画面：自動スクロール＋展開
// ==============================
add_action('admin_footer', function() {
    $screen = get_current_screen();
    if (!in_array($screen->base, ['post', 'edit'])) return;
?>
<script>
(function() {
    const params = new URLSearchParams(window.location.search);
    const target = params.get('scroll');

    if (!target) return;

    let id = '';
    if (target === 'css') id = 'custom_css';
    if (target === 'js')  id = 'custom_js';

    function openAllMetaBoxes() {
        document.querySelectorAll('.postbox').forEach(box => {
            if (box.classList.contains('closed')) {
                box.classList.remove('closed');
            }
        });
    }

    function scrollToTarget() {
        const el = document.getElementById(id);
        if (el) {
            el.scrollIntoView({ behavior: 'smooth', block: 'center' });
            el.style.border = '2px solid red';
            el.style.backgroundColor = '#fff8f8';
        } else {
            setTimeout(scrollToTarget, 500);
        }
    }

    setTimeout(() => {
        openAllMetaBoxes();
        scrollToTarget();
    }, 700);
})();
</script>

<style>
.code-tooltip {
    position: absolute;
    background: #fff;
    border: 1px solid #ccc;
    padding: 10px;
    max-width: 420px;
    max-height: 300px;
    overflow: auto;
    font-size: 12px;
    white-space: pre-wrap;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    z-index: 9999;
    pointer-events: auto;
}

.code-actions {
    margin-top: 8px;
    display: flex;
    justify-content: space-between;
}

.code-btn {
    font-size: 11px;
    padding: 4px 6px;
    cursor: pointer;
    background: #f0f0f0;
    border: 1px solid #ccc;
}

.code-btn:hover {
    background: #e0e0e0;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {

    let tooltip;
    let hideTimeout;

    document.querySelectorAll('.code-preview').forEach(el => {

        el.addEventListener('mouseenter', function(e) {

            clearTimeout(hideTimeout);

            if (tooltip) tooltip.remove();

            tooltip = document.createElement('div');
            tooltip.className = 'code-tooltip';

            const full = this.dataset.full;
            const preview = this.dataset.preview;

            tooltip.innerHTML = `
                <div class="code-content">${preview}...</div>
                <div class="code-actions">
                    <span class="code-btn show-full">全文</span>
                    <span class="code-btn copy-code">コピー</span>
                </div>
            `;

            document.body.appendChild(tooltip);

            tooltip.style.left = (e.pageX + 15) + 'px';
            tooltip.style.top  = (e.pageY + 15) + 'px';

            tooltip.querySelector('.show-full').onclick = () => {
                tooltip.querySelector('.code-content').textContent = full;
            };

            tooltip.querySelector('.copy-code').onclick = () => {
                navigator.clipboard.writeText(full);
                tooltip.querySelector('.copy-code').textContent = 'コピー済み';
            };

            tooltip.addEventListener('mouseenter', () => {
                clearTimeout(hideTimeout);
            });

            tooltip.addEventListener('mouseleave', () => {
                removeTooltip();
            });
        });

        el.addEventListener('mouseleave', function() {
            hideTimeout = setTimeout(removeTooltip, 300);
        });

        function removeTooltip() {
            if (tooltip) {
                tooltip.remove();
                tooltip = null;
            }
        }

    });

});
</script>
<?php
});

CSS/JavaScriptの内容表示、編集

マウスオーバーで表示された内容を編集可能にします。
実際、一覧画面で編集は必要か？と思ったのですが、色、幅等の変更とかちょっとしたことを変更したい場合には便利かも？と思いとりあえず機能を追加してみました。

// ==============================
// CSS/JS列 追加（タイトルの右）
// ==============================
add_filter('manage_posts_columns', function($columns) {
    $new_columns = [];
    foreach ($columns as $key => $value) {
        $new_columns[$key] = $value;
        if ($key === 'date') {
            $new_columns['custom_css_js'] = 'CSS/JS';
        }
    }
    return $new_columns;
});

add_filter('manage_pages_columns', function($columns) {
    $new_columns = [];
    foreach ($columns as $key => $value) {
        $new_columns[$key] = $value;
        if ($key === 'date') {
            $new_columns['custom_css_js'] = 'CSS/JS';
        }
    }
    return $new_columns;
});

// ==============================
// 列の表示（リンク＋データ付与）
// ==============================
function add_custom_css_js_column($column_name, $post_id) {
    if ($column_name === 'custom_css_js') {

        $css = get_post_meta($post_id, '_custom_css', true);
        $js  = get_post_meta($post_id, '_custom_js', true);

        $flags = [];
        $edit_link = get_edit_post_link($post_id);

        if (!empty(trim($css))) {
            $preview = mb_substr($css, 0, 120);
            $flags[] = '<a href="' . esc_url($edit_link . '&scroll=css') . '" target="_blank"
                class="code-preview"
                data-post="' . $post_id . '"
                data-type="css"
                data-full="' . esc_attr($css) . '"
                data-preview="' . esc_attr($preview) . '"
                style="color:#d63638;font-weight:bold;">★CSS</a>';
        }

        if (!empty(trim($js))) {
            $preview = mb_substr($js, 0, 120);
            $flags[] = '<a href="' . esc_url($edit_link . '&scroll=js') . '" target="_blank"
                class="code-preview"
                data-post="' . $post_id . '"
                data-type="js"
                data-full="' . esc_attr($js) . '"
                data-preview="' . esc_attr($preview) . '"
                style="color:#2271b1;font-weight:bold;">★JS</a>';
        }

        echo !empty($flags) ? implode('<br>', $flags) : '-';
    }
}

add_action('manage_posts_custom_column', 'add_custom_css_js_column', 10, 2);
add_action('manage_pages_custom_column', 'add_custom_css_js_column', 10, 2);

// ==============================
// フィルター
// ==============================
add_action('restrict_manage_posts', function() {
    $selected = $_GET['css_filter'] ?? '';
    ?>
    <select name="css_filter">
        <option value="">CSS/JSすべて</option>
        <option value="css" <?php selected($selected, 'css'); ?>>CSSあり</option>
        <option value="js" <?php selected($selected, 'js'); ?>>JSあり</option>
        <option value="both" <?php selected($selected, 'both'); ?>>CSS + JS</option>
    </select>
    <?php
});

// ==============================
// フィルター処理＋並び替え
// ==============================
add_action('pre_get_posts', function($query) {
    if (!is_admin() || !$query->is_main_query()) return;

    if (!empty($_GET['css_filter'])) {

        $meta_query = [];

        if ($_GET['css_filter'] === 'css') {
            $meta_query[] = [
                'key' => '_custom_css',
                'compare' => '!=',
                'value' => ''
            ];
        }

        if ($_GET['css_filter'] === 'js') {
            $meta_query[] = [
                'key' => '_custom_js',
                'compare' => '!=',
                'value' => ''
            ];
        }

        if ($_GET['css_filter'] === 'both') {
            $meta_query[] = [
                'relation' => 'AND',
                [
                    'key' => '_custom_css',
                    'compare' => '!=',
                    'value' => ''
                ],
                [
                    'key' => '_custom_js',
                    'compare' => '!=',
                    'value' => ''
                ]
            ];
        }

        $query->set('meta_query', $meta_query);
    }

    if ($query->get('orderby') === 'custom_css_js') {
        $query->set('meta_key', '_custom_css');
        $query->set('orderby', 'meta_value');
    }
});

// ==============================
// 並び替え
// ==============================
add_filter('manage_edit-post_sortable_columns', function($columns) {
    $columns['custom_css_js'] = 'custom_css_js';
    return $columns;
});

add_filter('manage_edit-page_sortable_columns', function($columns) {
    $columns['custom_css_js'] = 'custom_css_js';
    return $columns;
});

// ==============================
// 編集画面：自動スクロール＋展開
// ==============================
add_action('admin_footer', function() {
    $screen = get_current_screen();
    if (!in_array($screen->base,['post','edit'])) return;
?>
<script>
(function() {
    const params = new URLSearchParams(window.location.search);
    const target = params.get('scroll');
    if (!target) return;
    let id = target==='css'?'custom_css':'custom_js';
    function openAllMetaBoxes(){ document.querySelectorAll('.postbox.closed').forEach(b=>b.classList.remove('closed')); }
    function scrollToTarget(){
        const el=document.getElementById(id);
        if(el){ el.scrollIntoView({behavior:'smooth',block:'center'}); el.style.border='2px solid red'; el.style.backgroundColor='#fff8f8'; }
        else setTimeout(scrollToTarget,500);
    }
    setTimeout(()=>{ openAllMetaBoxes(); scrollToTarget(); },700);
})();
</script>
<?php
});

// ==============================
// AJAX保存
// ==============================
add_action('wp_ajax_save_custom_code', function() {
    if (!current_user_can('edit_posts')) wp_send_json_error();
    $post_id = intval($_POST['post_id']);
    $type    = sanitize_text_field($_POST['type']);
    $content = wp_unslash($_POST['content']);
    if($type==='css') update_post_meta($post_id,'_custom_css',$content);
    if($type==='js')  update_post_meta($post_id,'_custom_js',$content);
    wp_send_json_success();
});

// ==============================
// 管理画面 JS（ツールチップ＋クリックで新規タブ＋保存）
// ==============================
add_action('admin_footer', function() {
    $screen = get_current_screen();
    if (!in_array($screen->base,['edit','post'])) return;
?>
<style>
.code-tooltip{position:absolute;background:#fff;border:1px solid #ccc;padding:10px;max-width:420px;max-height:320px;overflow:auto;font-size:12px;white-space:pre-wrap;box-shadow:0 4px 12px rgba(0,0,0,0.2);z-index:9999;}
.code-actions{margin-top:8px;display:flex;justify-content:space-between;}
.code-btn{font-size:11px;padding:4px 6px;cursor:pointer;background:#f0f0f0;border:1px solid #ccc;}
.code-btn:hover{background:#e0e0e0;}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
    let tooltip, hideTimeout, isEditing = false;

    document.querySelectorAll('.code-preview').forEach(el => {

        el.addEventListener('mouseenter', function(e) {
            if (tooltip && isEditing) return;
            clearTimeout(hideTimeout);
            if (tooltip) tooltip.remove();

            const full = this.dataset.full;
            const preview = this.dataset.preview;
            const postId = this.dataset.post;
            const type   = this.dataset.type;

            tooltip = document.createElement('div');
            tooltip.className = 'code-tooltip';
            tooltip.dataset.full = full; // ← 全文を tooltip に保持
            tooltip.innerHTML = `
                <textarea class="code-content" style="width:100%;height:140px;">${preview}</textarea>
                <div class="code-actions">
                    <span class="code-btn show-full">全文</span>
                    <span class="code-btn save-code">保存</span>
                    <span class="code-btn copy-code">コピー</span>
                    <span class="code-btn close-tip">閉じる</span>
                </div>
            `;

            document.body.appendChild(tooltip);
            tooltip.style.left = (e.pageX + 15) + 'px';
            tooltip.style.top  = (e.pageY + 15) + 'px';

            const textarea = tooltip.querySelector('.code-content');

            // 「全文」ボタン
            tooltip.querySelector('.show-full').onclick = () => {
                textarea.value = tooltip.dataset.full; // ← tooltip に保持した全文を取得
            };

            // コピー
            tooltip.querySelector('.copy-code').onclick = () => {
                navigator.clipboard.writeText(textarea.value);
                tooltip.querySelector('.copy-code').textContent = 'コピー済み';
            };

            // 保存（AJAX + 即時反映）
            tooltip.querySelector('.save-code').onclick = () => {
                const newContent = textarea.value;
                if (!confirm('この内容で保存しますか？')) return;

                fetch(ajaxurl, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                    body: new URLSearchParams({
                        action: 'save_custom_code',
                        post_id: postId,
                        type: type,
                        content: newContent
                    })
                })
                .then(res => res.json())
                .then(data => {
                    if (data.success) {
                        el.dataset.full = newContent;
                        el.dataset.preview = newContent.substring(0, 120);
                        tooltip.dataset.full = newContent; // ← tooltip 内の全文も更新
                        tooltip.querySelector('.save-code').textContent = '保存済み ✔';
                        textarea.style.border = '2px solid green';
                    }
                });
            };

            // 閉じる
            tooltip.querySelector('.close-tip').onclick = () => {
                if (tooltip) { tooltip.remove(); tooltip = null; isEditing = false; }
            };

            // 編集中フラグ
            textarea.addEventListener('focus', () => { isEditing = true; });
            textarea.addEventListener('blur', () => { isEditing = false; });

            // ツールチップ内マウス操作
            tooltip.addEventListener('mouseenter', () => { clearTimeout(hideTimeout); });
            tooltip.addEventListener('mouseleave', () => {
                if (!isEditing) { tooltip.remove(); tooltip = null; isEditing = false; }
            });
        });

        // マウス離脱で非表示
        el.addEventListener('mouseleave', () => {
            hideTimeout = setTimeout(() => {
                if (!isEditing) { tooltip.remove(); tooltip = null; isEditing = false; }
            }, 500);
        });

        // クリック時：新規タブで開く＋保存
        el.addEventListener('click', function(e) {
            e.preventDefault();
            const postId = this.dataset.post;
            const type   = this.dataset.type;
            const content = this.dataset.full;
            const href = this.href;

            fetch(ajaxurl, {
                method: 'POST',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                body: new URLSearchParams({
                    action: 'save_custom_code',
                    post_id: postId,
                    type: type,
                    content: content
                })
            }).finally(() => {
                window.open(href, '_blank');
            });
        });

    });
});
</script>
<?php
});

さいごに

Cocoonの投稿ごとに設定できるカスタムCSSやJavaScriptはとても便利な機能ですが、記事数が増えてくると管理が大変になりがちです。
投稿一覧で一目で分かるようにするだけでも、作業効率はいくらか改善されると思います。
特に「どの記事にCSSを書いたか分からない…」と感じたことがある方には、あれば便利な機能だと思います。カスタマイズ自体もそれほど難しくないので、ぜひ一度試してみてください。

ワードプレスのアフリエイト広告掲載プラグインでとっても便利なポチップ。
ポチップを使うにあたり、アマゾン、楽天市場とかいろいろなところを使っている場合はいいのですが、アマゾンなど1つだけに絞り込んで掲載する場合、ボタンの位置が左寄せとなりその横が空白となってしまいます。その横の空白が気になっていたのでボタンの配置を少し調整しボタンが1つの時には横いっぱいになるように、2つ以上あるときはポチップ設定のまま複数表示されるようにしてみました。

ポチップでボタンを1つだけ表示するには

アマゾンや楽天等いろいろある中で、例えばアマゾンだけを表示させる場合は、投稿編集画面のポチップ設定より行うことになります。

投稿編集画面でポチップのブロックを選択し、右横にあるオプション画面より非表示にしたいボタンにチェックを入れるだけです。

CSSへ追記

ボタンが1つの場合に、横いっぱいにボタンを広げるには、下記コードをCSSに追記するだけです。

/* ボタンが1つのときだけ横幅いっぱいにする */
.pochipp-box__btns[data-maxclmn-pc="fit"] 
.pochipp-box__btnwrap:only-child {
  flex: 1 1 100% !important;
  max-width: 100% !important;
}

CSSに追記すると下記のようになります。
※ ボタンはポチップ設定で”ボタンの丸み”を丸めに設定しています。

ボタンの幅を狭くし中央寄せ

ボタンを横幅いっぱいではなく少し小さめとかにしたい場合は黄色の上記のCSSコードの網掛け部分を下記のように変更すれば、ボタンの幅を調整できます。

flex: 0 0 80% !important;
max-width: 80% !important;
margin: 0 auto !important;

ボタンの幅を80%にしていいした場合が⇩です。

余談ですが、flex: について
grow → 1（余白があれば伸びる）→ 0（伸びない）
shrink → 1（狭ければ縮む）→ 0（縮まない）
basis → 100%（最初は100%）
だそうです。

ボタンが、2つ以上ある場合にはポチップ設定に合わせた配置となります。⇩

さいごに

カスタムというほどの物ではないのですが、ボタンが1つしかないときに右横にスペースが出来るのが気になったのでちょっと調整をしてみました。

先週、Nextcloudを32.0.6にアップデートしたと思ったら、33.0.0が出ていました。
早速アップデートし、いつものようにインデックスの追加、occ maintenance 等を行い警告の対処を行ったのですが、新しい”設定サーバーID”という見慣れないものが表示されいたので、対処することにしました。

設定サーバーID

下の赤枠の部分です。

サーバー識別子が設定されていません。Nextcloudインスタンスが複数のPHPサーバー上で動作している場合、設定することを推奨します。設定ファイルにサーバーIDを追加してください。
となっています。
この警告は、複数のPHPサーバーで動かしている場合に重要な設定だそうです。
ただレンタルサーバーの場合は、単一PHP環境として動作するので実質「シングルサーバー運用」扱いになるので、特に何もしなくても問題はないとのことです。
でも気になるので、消せるなら消したいものです。

ということで調べると簡単に消すことが出来るようです。

対処方法

Nexcoludのconfig.phpに下記のコードを追記するだけでした。

'serverid' => 'xserver01',

追記場所は、config.phpの上の方にある’secret'の下に追記します。

$CONFIG = array (
  'instanceid' => 'xxxx',
  'passwordsalt' => 'xxxx',
  'secret' => 'xxxx',
  'serverid' => 'xserver01',
);

追記したら、Nextcloudにサインインし直すと消えています。ただしキャッシュが残っているとすぐには消えないようですので少し時間を空けてログインしてみてください。

さいごに

Onlyofficeが有効になっているとファイルのフォルダーが読み込まれないようです。
Onlyofficeを無効にすれば問題なくフォルダーが読み込まれますが、Onlyofficeをよく使う方はしばらくアップデートは待った方がいいようです。
もうすぐ、Onlyofficeのアップデートが出るようですが...

OnlyofficeがVer10.0.0に更新されました。
これでNextcloud更新後のフォルダー問題は解決となります

ただ、Community Document ServerがNextloud33に対応していないようで、Onlyofficeでファイルを開いても何も表示されず、編集等もできなくなっています。

Onlyofficeを使っている方は要注意です！

警告の対処方法とかは⇩で検索

アップデートが出たので、早速アップデートしたらところ、今まで見たことのない ”第二要素の設定 このインスタンスには利用可能な第二要素プロバイダーがありません。”の警告が出ていました。
早速調べると、Nextcloudで「利用可能な第二要素プロバイダーがありません」と表示されるのは、二要素認証（2FA）が有効化されているのに、利用可能なアプリ（TOTP、SMS等）がインストール・設定されていないためとのこと。
今まで2段階認証の設定はしていないのでですが。今回のアプデートでセクリティーが強化されてために2段階認証を設定できるようにアプリを入れろとの警告のようです。
ということで2段階認証を行うためのアプリをインストールすることにしました。
すでに2段階認証を設定している場合は、この警告は出ないかもしれません。
警告が出た方はご参考ください。

対処方法

今回でた警告は、赤枠のところです。

さっそくアプリをインストールします。
今回は、”無効なアプリ”で確認すると”Two-Factor TOTP Provider"というのが無効になっていたのでそれを有効にします。

すると警告が消えて、新たに下の赤枠のように”第二要素の設定”が情報として表示されました。
2段階認証が設定されていませんよという情報に変わりました。

今のところ2段階認証はログインする時に手間暇がかかるので、設定をするつもりはないのでそのままにすることにしました。
とりあえず警告の対処はここまでとします。

2段階認証の設定を行う場合は、管理者設定のセキュリティから設定を行えるようです。

ブログを運営していて、キャンペーンの告知やちょっとしたお知らせなど「期間限定で伝えたい情報」を表示したいことが意外とあります。
そんなときに便利なのがポップアップなのですが、実際にポップアッププラグインを探してみると高機能で便利な反面、設定項目が多く、「ちょっとしたお知らせには大げさだな」と感じることがありました。
個人ブログなのでもっとシンプルに、必要なときだけ使えるポップアップ プラグインをなかなか見つけることが出来なかったので、お知らせ用にちょうどいいポップアッププラグイン「Popup Studio」を自分で作ってみることにしました。
興味のある方はぜひ試してみてください。（無料配布中）

[wpdm_package id='2028']

このプラグインには、最初の30日間という区切りを付けています。
30日制限は、使えるかどうかを知るため＋感想をもらうために付けています。
期限が来ても、無料ライセンス登録するだけで継続して使えます。

Popup Studio とは

Popup Studio は、WordPressサイトで使う お知らせ・告知向けのポップアップを、シンプルに管理するためのプラグインです。

表示期間を決めてポップアップを出したり、複数ある場合は優先度を設定したりと、実際の運用でよく使う機能だけ に絞って作られています。
多くのポップアッププラグインは、マーケティング用途や高度なトリガー設定を前提としているものが多いので、個人ブログでは少し扱いづらいと感じることもあります。

Popup Studio はそういった方向とは異なり、
・設定が分かりやすい
・管理画面で状態を把握しやすい
・必要なときだけ、迷わず使える
ことを重視しています。

高機能ではありませんが、「ちょっとしたお知らせを、きちんと管理したい」
そんな用途にはちょうどいいプラグインです。

主な機能

Popup Studio は、高機能さよりも「実際の運用で使いやすいかどうか」を重視したものとなっています。
主な機能は下記となります。

• 管理画面からポップアップを作成・編集（クラシックエディタを使用）
• テキスト・画像・動画を使ったポップアップ表示（サイズ、位置指定あり）
• 表示開始日・終了日の設定（期間限定表示に対応、時間指定、曜日指定、除外期間あり）
• 表示する投稿、固定ページ指定、除外指定が可能
• 期間未設定の場合は常時表示として利用可能
• 複数ポップアップの管理に対応
• 優先度を設定して表示順を制御
• ポップアップごとの表示ON / OFF切り替え
• 一覧画面で表示状態・期間・優先度をまとめて確認
• 一覧画面からの簡易操作（優先度変更など）
• 管理画面からのプレビュー機能（簡易表示）
• テーマに依存しにくい構成で動作
• 個人ブログ・小規模サイト向けの軽量設計

他にも、バックアップ機能、ディバック機能（ポップアップが なぜ表示された／されなかったのか を確認するための可視化ツール）もあります

Popup Studio の使いかた

Popup Studio の管理画面は、
・Popup Studio （一覧画面）
・ポップアップを追加
・全体設定
から構成されています。
それぞれの説明をしていきたいと思います

「ポップアップを追加」画面について

「ポップアップを追加」画面は、新しいポップアップを作成し、内容や表示ルールを設定するための画面です。
表示したい文章や画像を入力し、表示期間、表示条件等を設定する画面となります。
Popup Studio →「ポップアップを追加」から新規作成します。

タイトル：管理用の名前（表示には影響しません）
ポップアップ内容：表示したい文章・画像・動画などを入力（クラッシックエディタ）

・プレビュー表示では、編集した内容を保存する前にプレビュー表示することが出来ます。
※ただし、テーマなどのCSSは読み込まないため、位置の確認などにの簡易版となります。

赤枠の部分は表示内容を設定するものとなります
青枠の部分は表示期間等の条件を設定するものとなります。

下の赤枠はポップアップのクローズのタイミング、表示頻度、表示ページ指定等の設定です。

「Popup Studio」 （一覧画面）について

「Popup Studio」（一覧画面）は、作成したポップアップを「まとめて管理するための画面」です。
表示状態や表示期間を確認しながら、必要に応じてポップアップ表示のON/OFF、優先度の変更が行えます。

※上の画像は、一覧画面に表示されている内容を右上にある『表示オプション』で表示されるものを選択しています

赤枠の部分が変更等ができるものとなります
変更内容は、瞬時に反映され保存されます。
・ ポップアップを個別に表示設定をON / OFF の切り替え
・ 優先度の変更
・簡易プレビュー表示

また、下記は詳細確認のみとなります。
・表示期間
・表示条件
表示条件がある場合にはリンク付きの”あり”が表示され、クリックするとそのポップアップの編集画面が開きます。
※ プレビューは簡易表示です。テーマ固有のデザインや装飾は、実際のページ表示で確認ください。

紫枠はディバッグになります。
※ 全体設定で、デバッグ機能を有効にした場合のみに表示されます。
ディバッグに関する説明は、別項目での説明を確認ください。

クイック編集について

クイック編集ではPopup Studio 用に赤枠の部分が変更可能となっています、

下記が変更できます。
・ステータス
・表示 ON / OFF
・優先度
・表示開始・表示終了
・日数間隔
・初回のみ表示 ON/OFF （初回アクセスのみ表示させる）
・条件設定
※表示条件がある場合にはリンク付きの”あり”が表示され、クリックするとそのポップアップの編集画面が開きます

「全体設定」について

新規作成時の初期値設定や、デバッグ・バックアップなどの補助機能を管理する画面です。

赤枠の部分は、ポップアップ機能のON/OFFの選択、ディバッグのON/OFFの切り替えとなります。
※ポップアップ機能をOFFにした場合は、個別にポップアップ表示がONとなっていても全てのポップアップが表示されなくなります。

青枠の部分は、新規作成時のデフォルト値（未入力時の初期値）、ディバッグの使い方の説明となります。
▶をクリックするとに下記の初期値の設定、ディバッグの説明画面が表示されます。

赤枠の初期設定について

新規作成時のデフォルト値
新しくポップアップを作成した際に、自動で入力される初期値を設定します。
編集画面で各項目を未入力のまま保存した場合は、ここで設定した値が使用されます。
※ 既に作成されているポップアップの設定には影響しません。

初期値は、ポップアップ表示時間、最大表示回数、表示回数カウントの期間、表示間隔、初回アクセスページのみ表示の初期値を設定できます。

※ 青枠の表示回数カウントの期間について
編集画面には表示されない項目です。
ポップアップの表示回数は、訪問者ごとにカウントされています。そのカウントを、どのくらいの期間リセットせずに累積するのかを決めるのが表示回数カウントの期間（時間） となります。
おすすめは30日（720時間）です。

デバッグ、バックアップ/復元（サーディバッグのONバー）

・ディバッグをONにすると下の青枠の部分が表示されます
・赤枠の部分がバックアップ/復元の機能となります。

デバッグの使い方（手順・見方）

このデバッグ機能は、エラー調査ではなく「ポップアップが なぜ表示された／されなかったのか を確認するための可視化ツール」で、「出ない理由が分からない」状態をなくすためのツールです。
管理画面で デバッグを ONにし、表示された青枠の部分に確認したい投稿・固定ページ等のID番号を入れ”ディバッグを開く”をクリックすると下記画面が表示されます。（一覧画面に表示されるディバッグも同じです）
※ID入力欄を空欄にした場合は、トップページでの内容が表示されます。
デバッグを使い終わったら OFFにすることをお勧めします。

※ 本番環境での動作について（重要）
本番環境でも WordPress にログインしている管理者のみ 、URLの最後に?popup_debug=1 を付ければデバッグを利用できます。
例：httos://XXXXXXXXX.com?popup_debug=1
ただし、一般ユーザー（未ログイン）は?popup_debug=1 を付けても デバッグ画面は表示されません
デバッグ画面は 管理者の確認用途のみ に表示され、一般ユーザーの表示には一切影響しません。

Result（判定結果）の結果は下記3つとなります
・ 選択
最終的に表示されるポップアップ。すべての条件を満たし、優先度・強度の比較の結果「採用」された状態
実際にユーザーに表示されるのはこの1件のみ
・候補
条件はすべてクリアしているが、他により優先度の高いポップアップが存在するため採用されなかった「表示できた可能性はある」状態
・除外
何らかの条件により 表示対象から除外された。右側に表示される理由が、その 除外理由

除外の主な理由例
曜日が条件外、表示時間帯外、除外期間中、表示回数／Cookie 制限に達している、初回のみ表示条件に合わない、対象ページ条件が一致していない、ログイン条件が一致していないなどです

優先度・強度について
・優先度
ポップアップ同士の優先順位
・強度
同一条件内での強さ、複数の 候補がある場合でも最終的に選択されるのは1件のみです。
表示条件がどれだけ一致しているか、対象ページ条件の一致度、初回表示・リピート条件、特定条件（ログイン、曜日、時間帯など）管理者が設定した重み付けで、「このポップアップは今このページで出すのにどれだけ適しているか」を数値化したものです。

※よくある「表示されない」原因は、曜日／時間帯が条件に合っていない、除外期間に入っている、Cookie・表示回数制限に達している、対象ページ条件が一致していない、他のポップアップが優先度で勝っている
または公開ではなく下書きになったままなどです。

バックアップ機能の使い方

バックアップ機能は、ポップアップの設定内容（投稿データ・メタ情報）を、誤操作や不具合に備えて退避・復元できる仕組みです。

・バックアップの対象

バックアップされるのは、主に以下の内容です。

• タイトル
• 本文（HTML / ブロック内容）

• 表示条件
• 表示回数・間隔
• 除外ページID
• 位置・サイズなどのレイアウト設定

• ポップアップ投稿本体
  • タイトル
  • 本文（HTML / ブロック内容）
• 各ポップアップの設定情報
  • 表示条件
  • 表示回数・間隔
  • 除外ページID
  • 位置・サイズなどのレイアウト設定
• プラグイン独自の post_meta 情報

「ポップアップ1件分の設定を丸ごと」バックアップします。

※対象外のもの

画像ファイルそのもの（メディアは参照のみ）

・バックアップの保存場所

wp-content/uploads/popup-studio-backups にpopup-studio-backup-20260115-025349.jsonの様な形式で保存されます。
必要がなくなった場合には、ご自身で削除してください。

復元（リストア）について

復元を行うには、設定画面の”復元を実行する”にチェックを入れ”最新バックアップから復元”をクリックするだけです。

バックアップから復元すると、次のような挙動になります。
・バックアップ取得時点の設定内容に 完全に戻る
・現在の設定内容は 上書きされる
・復元後は、即座にフロント表示にも反映される
※ 復元操作は元に戻せませんので実行前に内容を確認必ず確認ください。

優先度について

ポップアップが複数ある場合の優先度について、同じ優先度で最大表示回数・表示間隔（日数）がどちらも空白（＝制限なし）の場合、基本的には「常に同じポップアップ」が表示されます。
※同じ優先度、制限（回数・日数）なし、他条件も同じ場合は、 常に同じポップアップが表示されます

ただし、“運用で”ローテーションすることもできます。
表示間隔（日数）を 1 にする、最大表示回数を 1 にする、優先度を少しずらす（10 / 20 / 30 など）など少し工夫をすれば可能です。

さいごに

あまり派手な機能はいらないので、できるだけシンプルに必要な要件を満たしたポップアップを使いたいと思い、自分用に作ってみたプラグインです。
まだ不具合や足らない機能があるかもしれませんが、興味のある方はぜひ使ってみてください。

WordPressで「昔の記事ももう少し注目させたいな…」って思ったことありませんか？それには投稿記事を更新するのが良いのかなと思っていたのですが、毎回手動で更新するのは手間がかかりすぎるので、ChartGPに相談しながらプラグインを作ってみました。その名も ROP Scheduler！

このプラグインでは投稿や固定ページ、カスタム投稿の更新日だけを自動で新しくしてくれるので、過去の記事も自然に目立つようになります。1日の更新件数も制限できるので、まとめて一気に更新される心配もありません。

設定は管理画面から簡単にでき、更新間隔や1日あたりの最大件数も自由に指定できます。「今すぐ更新」ボタンを押せば、今日でもすぐに更新可能です。過去の記事を目立たせたい、SEO的に更新日を新しくしてアクセスを増やしたい、そんな方にぴったりです。

興味がある人は、プラグインとして配布しているので、ぜひ気軽に試してみてください！

[wpdm_package id='1963']

このプラグインには、最初の30日間という区切りを付けています。
30日制限は、使えるかどうかを知るため＋感想をもらうために付けています。
期限が来ても、無料ライセンス登録するだけで継続して使えます。

ROP Scheduler の特徴

• 古い投稿も手軽に目立たせられる
  記事の投稿日はそのままに、更新日だけサクッと新しくできます。これで過去記事も注目されやすくなります。
• カスタム投稿タイプもOK
  投稿だけじゃなく、固定ページや公開中のカスタム投稿もまとめて対象にできます。
• 更新間隔や件数も自由に調整
  「1日あたり何件まで更新するか」「更新間隔は何日おきか」など、管理画面で簡単に設定可能です。
• 手動更新もワンクリックで
  「今すぐ更新」ボタンを押せば、今日でもすぐに投稿の更新日を変更できます。
• 一括操作でまとめて管理
  更新ステータスの変更や停止、削除もまとめてできるので便利です。
• アクセスアップやSEO対策にも活用できる
  更新日を新しくすることで検索エンジンにも好まれやすく、アクセス数改善にもつながります。
• 自動更新したくない記事も簡単に除外
  「更新禁止」カテゴリに入れた記事は自動更新から除外可能。安心して使えます。

ROP Schedulerの使い方

• 左メニューにある 「投稿更新スケジューラー」クリックすると投稿一覧・Cron設定・一括操作画面にアクセスします。

投稿一覧の見方

投稿タイプ選択

• ドロップダウンで 投稿、固定ページ、カスタム投稿タイプ を切り替え可能
• 公開されているカスタム投稿も表示されます

カテゴリ・タグ・有効・更新ステータスで絞り込み

• 実施：自動更新対象
• 停止：自動更新対象外
• 指定：手動で指定する投稿

• 「すべてのカテゴリー」「すべてのタグ」「有効/無効」「更新ステータス」を指定してリストを絞り込み可能
• 更新ステータス：
  • 実施：自動更新対象
  • 停止：自動更新対象外
  • 指定：手動で指定する投稿

各投稿の設定（カラム説明）

※ カラムの有効、更新間隔を変更設定した場合には必ず「設定を保存」ボタンを押して保存してください。

手動更新

• 投稿一覧の「今すぐ更新」ボタンをクリック
• 対象投稿の post_modified が即時更新されます
• 投稿日 (post_date) は変更されません

一括操作の使い方

• 更新ステータスを「実施」に設定
• 更新ステータスを「停止」に設定
• 更新ステータスを「指定」に設定
• 更新ステータスを削除

1. 投稿の左側のチェックボックスにチェック
2. 一括操作ドロップダウンから選択：
   • 更新ステータスを「実施」に設定
   • 更新ステータスを「停止」に設定
   • 更新ステータスを「指定」に設定
   • 更新ステータスを削除
3. 「適用」をクリック

Cron（自動更新）の設定

1. 管理画面上部で 実行時間 を指定（例：08:00）
2. 「スケジューラーを有効にする」 にチェック
3. 1日の最大更新件数 を入力（例：5件 ※設定した件数を超えた投稿は、その日は更新されず、翌日以降に順次処理されます）
4. 「Cron設定を保存」をクリック

• Cronは指定時刻に自動実行され、次回更新日が今日か過去の投稿のみ更新対象
• 「今すぐ実行」ボタンで手動実行も可能
  ※ 設定した「更新間隔」と「1日あたりの最大件数」に従って、今日更新対象の投稿をまとめて即時更新します。管理画面で「今日更新可能な記事」を一括で更新したいときに使用します。

Cron実行に関する注意点

ROP Scheduler は、設定した時間に記事の更新日を自動で更新する便利な機能ですが、以下の点にご注意ください。

• アクセス依存型
  サイトにアクセスがないと Cron は実行されないことがあります。
  WordPress の標準 Cron は、誰かがサイトを訪問したタイミングで動く仕組みなので、長期間アクセスがない場合、設定時間に更新されないことがあります。
• 更新タイミング
  設定した時間の前後に実行されます。サーバー状況によっては少し遅れる場合があります。
• サーバー負荷に注意
  一度に大量の記事を更新すると負荷がかかる場合があるので、件数や間隔はサーバー環境に合わせて調整してください

補足・注意事項

• 「更新禁止」カテゴリが付いた投稿は自動更新対象から除外されます
• カスタム投稿タイプも公開されていれば対象になります
• Cronが動かない場合は、プラグインの無効化→有効化で再登録
• 投稿ステータスを「停止」にすると自動更新がスキップされます

更新対象の選ばれ方について

ROP Scheduler では、投稿・固定ページ・カスタム投稿といった すべての公開投稿タイプ を対象に一覧を取得し、その中から更新対象の記事を選びます。
投稿タイプごとに分けて処理するのではなく、すべてをまとめたうえで更新日（post_modified）が古い順に並び替え、設定した「1日の最大更新件数」分だけを選んで更新します。
そのため、投稿・固定ページ・カスタム投稿の区別なく、もっとも長く更新されていない記事から順番に少しずつ更新されていく仕組みです。
一部の投稿タイプだけが優先されたり、特定の種類の記事だけがまとめて更新されることはありません。
この仕様により、サイト全体の記事をバランスよく回しながら、更新日の偏りやサーバー負荷を抑えて運用できます。

最後に

以上が ROP Scheduler の使い方と特徴の紹介でした。
過去の記事を手軽に目立たせたい、アクセス数をアップさせたい、そんなときにきっと役立つプラグインです。

興味のある方はぜひ試してみてくださいね。
「ちょっと試してみようかな」という気持ちで、まずは自分のサイトで動かしてみるのが一番です！

Nextcloudをアップデートする際に、警告への対処を行うためにいつも自分の投稿を探すことが多いので、カテゴリーを限定した検索ができるようにショートコードを作成してみました。
また、検索結果については、タイトルと抜粋した内容しか表示されていなかったので、検索文字を含む段落等のブロックを表示させることにしました。

Nextcloud関連の検索ページのリンクがまちがっていたのでなおしました。

まずはじめに

設置手順は2つになります。
・ショートコードを新規登録するためにfanction.phpにコードを追記。
・検索結果ページ用のPHPファイルを新規作成

設置ショートコード [[my_custom_search cat_id="XX"]]
cat_idをXXから指定したいカテゴリーIDに変更するだけ （cat_id="16" などに）

完成ごのカテゴリー指定検索結果ページ

初めに投稿記事タイトル、検索文字を含むブロック、最後にその投稿ページのリンクが表示され、複数のページがある場合には上記内容を繰り返しリストされます。

function.phpにコードを追記

早速下記コードをfunction.phpに追記をします。
黄色い部分の＜Style＞については好きなようにデザイン変更ください。
Cocoonでサイドバー検索ウィジェット設置している場合、通常の検索バーも表示されて分かりずらくなるのでカテゴリ限定検索結果ページでは通常の検索バーは非表示になるようにしています。（青ハイライト部分）

/*************************
指定カテゴリー内検索（ショートコード対応版・検索結果ページ再検索対応・サイドバー検索非表示対応）
**************************/

/**
 * 指定カテゴリ内に検索を限定（mycatsearch=1 の場合）
 */
function my_shortcode_search_limit_category($query) {
    if ($query->is_search() && $query->is_main_query() && !is_admin()) {

        // カテゴリ限定検索（mycatsearch=1）が付いているか？
        if (isset($_GET['mycatsearch']) && $_GET['mycatsearch'] == '1') {

            // ショートコードや検索結果ページからもらった cat_id
            if (!empty($_GET['cat_id'])) {

                // 複数 ID にも対応（例：5,7）
                $cat_ids = array_map('intval', explode(',', $_GET['cat_id']));

                $query->set('category__in', $cat_ids);
            }
        }
    }
}
add_action('pre_get_posts', 'my_shortcode_search_limit_category');



/**
 * カテゴリ限定検索結果ページのフォームだけ置き換え
 */
function my_custom_search_form_override($form) {

    // 条件：カテゴリ限定検索 & search-category.php を使用しているページ
    if (is_search() && isset($_GET['mycatsearch']) && $_GET['mycatsearch'] == '1'
        && !empty($_GET['cat_id'])
        && basename(get_page_template()) === 'search-category.php') {

        $cat_id = esc_attr($_GET['cat_id']);
        $s      = isset($_GET['s']) ? esc_attr($_GET['s']) : '';

        // カテゴリ固定の検索フォームを返す
        $form = '
        <form role="search" method="get" action="' . esc_url(home_url('/')) . '">
            <input type="search" name="s" placeholder="キーワードを入力" value="' . $s . '">
            <input type="hidden" name="mycatsearch" value="1">
            <input type="hidden" name="cat_id" value="' . $cat_id . '">
            <button type="submit">検索</button>
        </form>';
    }

    return $form;
}
add_filter('get_search_form', 'my_custom_search_form_override');



/**
 * ショートコード：カテゴリ限定検索フォーム（中央配置・横並び・レスポンシブ対応）
 * 使用例：[my_custom_search cat_id="5"]
 */
function my_custom_search_shortcode($atts) {

    $atts = shortcode_atts(
        array(
            'cat_id' => '',
        ),
        $atts,
        'my_custom_search'
    );

    $cat_id = esc_attr($atts['cat_id']);

    // フォーム生成
    ob_start(); ?>
    <form class="category-search" role="search" method="get" action="<?php echo esc_url(home_url('/')); ?>">
        <input type="search" name="s" placeholder="キーワードを入力">
        <?php if (!empty($cat_id)) : ?>
            <input type="hidden" name="mycatsearch" value="1">
            <input type="hidden" name="cat_id" value="<?php echo $cat_id; ?>">
        <?php endif; ?>
        <button type="submit">検索</button>
    </form>

    <style>
    /* ------- ショートコード用検索フォーム：中央配置、横並び ------- */
    .category-search {
        display: flex;
        max-width: 400px;          /* フォーム全体の最大幅 */
        width: 100%;
        margin: 0 auto 20px auto;  /* 中央寄せ + 下余白 */
        gap: 5px;                  /* 入力欄とボタンの間隔 */
    }

    /* 入力欄 */
    .category-search input[type="search"] {
        flex: 1;
        padding: 6px 10px;
        font-size: 16px;
        box-sizing: border-box;
    }

    /* ボタン */
    .category-search button {
    background-color: #0073aa;
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    display: inline-block;
    white-space: nowrap;
    }
.category-search button:hover {
    background-color: #005f8d;
}
    /* ------- スマホでは縦並びに変更 ------- */
    @media (max-width: 480px) {
        .category-search {
            flex-direction: column;
        }
        .category-search button {
            width: 100%;
        }
    }
    </style>
    <?php
    return ob_get_clean();
}
add_shortcode('my_custom_search', 'my_custom_search_shortcode');



/**
 * mycatsearch=1 のときだけ search-category.php を強制使用
 */
function my_select_search_template($template) {
    if (isset($_GET['mycatsearch']) && $_GET['mycatsearch'] == '1') {

        $custom_template = locate_template('search-category.php'); // カスタムテンプレート

        if (!empty($custom_template)) {
            return $custom_template;
        }
    }

    return $template; // 通常検索はそのまま
}
add_filter('template_include', 'my_select_search_template');



/**
 * サイドバー検索ウィジェットをカテゴリ限定検索結果ページのみ非表示
 */
function my_hide_sidebar_search_widget($sidebars_widgets) {

    if (is_search() && isset($_GET['mycatsearch']) && $_GET['mycatsearch'] == '1') {

        if (isset($sidebars_widgets['sidebar'])) {
            foreach ($sidebars_widgets['sidebar'] as $key => $widget_id) {

                // 検索ウィジェット（WP_Widget_Search）のみ削除
                if (strpos($widget_id, 'search') !== false) {
                    unset($sidebars_widgets['sidebar'][$key]);
                }
            }
        }
    }

    return $sidebars_widgets;
}
add_filter('sidebars_widgets', 'my_hide_sidebar_search_widget');

検索結果ページ用にsearch-category.phpを作成

通常の検索結果ページとは表示仕方を変更したいため、新たにカテゴリー指定の検索結果ページを作成するためにsearch-category.phpを新たに作成し、子テーマなどに設置します。
黄色い部分の＜Style＞については好きなようにデザイン変更ください。

<?php get_header(); ?>

<?php
$keyword        = get_search_query();
$highlight      = isset($_GET['hl']) ? $_GET['hl'] == '1' : true; // デフォルトON
$is_cat_limited = isset($_GET['mycatsearch']) && $_GET['mycatsearch'] == '1';
$cat_id         = isset($_GET['cat_id']) ? intval($_GET['cat_id']) : ''; // ★ カテゴリーID受け取り

/**
 * Gutenberg ブロックから検索ワードを含むブロックだけを抽出する
 */
function get_matching_blocks($blocks, $keyword, $highlight = false) {
    $matched = [];

    foreach ($blocks as $block) {

        // ネストされたブロックもチェック
        if (!empty($block['innerBlocks'])) {
            $matched = array_merge($matched, get_matching_blocks($block['innerBlocks'], $keyword, $highlight));
        }

        // ブロックそのものに一致があるか
        $html = render_block($block);
        $plain = strip_tags($html);

        if (stripos($plain, $keyword) !== false) {

            // ハイライト処理
            if ($highlight && !empty($keyword)) {
                $escaped = preg_quote($keyword, '/');
                $html = preg_replace(
                    "/($escaped)/i",
                    '<span class="search-highlight">$1</span>',
                    $html
                );
            }

            $matched[] = $html;
        }
    }

    return $matched;
}
?>

<div class="article">

<h1 class="entry-title">検索結果：「<?php echo esc_html($keyword); ?>」</h1>

<?php if ($is_cat_limited) : ?>

    <!-- ★ カテゴリ限定検索フォーム（検索結果ページ用） -->
    <div class="custom-search-form" style="margin:20px 0;">
        <form role="search" method="get" action="<?php echo home_url('/'); ?>">
            <input type="search" name="s" class="mysearch-input" placeholder="キーワードを入力" value="<?php echo esc_attr($keyword); ?>">

            <!-- カテゴリ限定検索のフラグ -->
            <input type="hidden" name="mycatsearch" value="1">

            <!-- ★ カテゴリーIDも引き継ぐ -->
            <?php if ($cat_id) : ?>
                <input type="hidden" name="cat_id" value="<?php echo esc_attr($cat_id); ?>">
            <?php endif; ?>

            <!-- ハイライト引き継ぎ -->
            <?php if ($highlight): ?>
                <input type="hidden" name="hl" value="1">
            <?php else: ?>
                <input type="hidden" name="hl" value="0">
            <?php endif; ?>

            <button type="submit" class="mysearch-btn">検索</button>
        </form>

        <!-- ハイライト切替 -->
        <div style="margin-top:10px;">
        <?php if ($highlight): ?>
            <a class="button" href="<?php echo esc_url(add_query_arg('hl', '0')); ?>">ハイライト：OFFにする</a>
        <?php else: ?>
            <a class="button" href="<?php echo esc_url(add_query_arg('hl', '1')); ?>">ハイライト：ONにする</a>
        <?php endif; ?>
        </div>
    </div>

<?php endif; ?>

<?php if (have_posts()) : ?>

    <?php while (have_posts()) : the_post(); ?>

        <?php
        $blocks = parse_blocks(get_the_content());
        $matched_blocks = get_matching_blocks($blocks, $keyword, $highlight);
        ?>

        <?php if (!empty($matched_blocks)) : ?>
            <div class="search-result-item">

                <h2 class="search-post-title">
                    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                </h2>

                <div class="matched-blocks">
                    <?php foreach ($matched_blocks as $html) : ?>
                        <div class="matched-block"><?php echo $html; ?></div>
                    <?php endforeach; ?>
                </div>

                <p class="search-post-link">
                    <a class="button" href="<?php the_permalink(); ?>">? 元の記事を見る</a>
                </p>

            </div>
        <?php endif; ?>

    <?php endwhile; ?>

<?php else : ?>

    <p>該当する記事がありませんでした。</p>

<?php endif; ?>

</div>

<style>
.matched-block {
    padding: 12px;
    background: #fafafa;
    border-left: 4px solid #ddd;
    margin: 20px 0;
}
.search-highlight {
    background: yellow;
    font-weight: bold;
}
.search-result-item {
    margin-bottom: 40px;
    border-bottom: 1px solid #eee;
    padding-bottom: 30px;
}

/* ★ 共通の検索ボタンデザイン */
.mysearch-btn {
    background-color: #0073aa;
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    display: inline-block;
    white-space: nowrap;
}
.mysearch-btn:hover {
    background-color: #005f8d;
}

/* ★ 検索窓（共通） */
.mysearch-input {
    width: 200px;
    max-width: 100%;
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}


/* ★ 検索結果ページの見出し（H2/H3/H4）の高さを強制調整 */
.search-result-item h2,
.search-result-item h3,
.search-result-item h4,
.search-result-item .matched-block h2,
.search-result-item .matched-block h3,
.search-result-item .matched-block h4 {
    margin-top: 6px !important;
    margin-bottom: 6px !important;
    line-height: 1.5 !important;
        padding-top: 6px !important;
    padding-bottom: 6px !important;
}

</style>

<?php get_footer(); ?>

ここまで出来たらカテゴリー別検索を設置したいところにショートコードを設置すれば完了です。

今回は固定ページにNextcloud に関する検索ページを作成し、そこに設置してみました。
リンクはこちら

さいごに

検索を行う際にドロップダウンメニューでカテゴリー選択をできるようにとも考えたのですが、今回はNextcloud 関連に特化した検索ページを作成したかったので、初めからカテゴリー指定をすることにしまた。

少しでも参考になればと思ます。

NextcludをVersion 31.0.8にやっとアップデートしました。
毎回、アップデートを行うたびに同じようなエラーや警告が出ています。そのたびに過去の投稿記事を確認しながらアップデートを行っていたのですが、複数の記事を見直す場合もあるのでポイントだけを簡単にリストして忘備録をのこすことにしました。

アップデート中のエラー

アップデート中にエラーとなったり止まったりする場合の対処は主に3つです。
具体的な内容は下記記事を参考ください。
この記事ではポイントだけを掲載してます。

ダウンロード中や更新中に動かなくなる

アップデート中にバックアップ作成時やダウンロード時に止まてしまった場合、Nextcloudをインストールしているディレクトリ内のdata フォルダにあるupdater-ocXXXXXXX フォルダーを削除して再度、初めからアップデートをやり直す。

ModPagespeed Offのエラーをあらかじめ対処

Nextcloudをインストールしているディレクトリ内のhtaccessのファイルを編集、ModPagespeed Offの前に＃を付ける

アップデート後の500エラー

＃＃＃の行を改行

# php — END cPanel-generated handler, do not edit#### DO NOT CHANGE ANYTHING ABOVE THIS LINE ####

となっているものを

AddDefaultCharset utf-8
Options -Indexes
#### DO NOT CHANGE ANYTHING ABOVE THIS LINE ####

改行して下記のようにする

アップデート後の警告

ヘッダーメモリーに関する警告

インスタンスの一部のヘッダーが正しく設定されていません - `Strict-Transport-Security` HTTPヘッダーが設定されていません（少なくとも `15552000` 秒に設定する必要があります）。セキュリティを強化するために、HSTSを有効にすることを推奨します。 詳細については、ドキュメント↗を参照してください。

Nextcloudをインストールしているディレクトリ内のhtaccessのファイルの最後に下記を追記

Header always set Strict-Transport-Security "max-age=15552000; includeSubDomains"

参考記事はここ⇩

インデックスがない

アップデート後の警告でたまに下記のようにインデックスがないので追加しなさいという警告が出ます。

いくつかの欠落しているオプションのインデックスを検出しました。データベースのパフォーマンスを向上させるために、（Nextcloudまたはインストールされたアプリケーションによって）新しいインデックスが追加されることがあります。インデックスの追加には時間がかかり、一時的にパフォーマンスが低下することがあるため、アップグレード時には自動的には行われません。インデックスが追加されると、それらのテーブルへのクエリが速くなるはずです。インデックスを追加するには、`occ db:add-missing-indices` コマンドを使用してください。 インデックスが不足: "unique_category_per_user" テーブル内の "vcategory" 詳細については、ドキュメント↗を参照してください。

エックスサーバーの管理画面のphpMyAdminを使って不足しているインデックスを追記します。

phpMyAdminのログイン用のIDとパスワードを覚えていない場合は、Nextcloudをインストールしているディレクトリ内のConfigフォルダのConfig.phpの中で確認することが出来ます。

phpMyAdminにログインをして、左のファイルのリストから目的のテーブルを探します。

今回は "vcategory" テーブルです。
その中に目的のインデックス、今回は "unique_category_per_user"がないことが確認できたら、インデックスにある新規作成を選択し、インデックス名のところに unique_category_per_user と入力し実行をクリック。これでインデックスの作成は終了です。

エックスサーバーでは対処できない警告

Nexcloudの管理者設定画面に表示される警告等で、エックスサーバーのレンタルサーバーでは現時点で対処できないために下記警告は残ってしまいます。

ⓧセットアップに関するいくつかのエラーがあります。

• セットアップに関するいくつかのエラーがあります。
• いくつかのファイルは整合性チェックに合格していません。 無効なファイルのリスト… 再スキャン… 詳細については、ドキュメント↗を参照してください。
• MariaDBバージョン "10.5.22-MariaDB-log" が検出されました。このバージョンのNextcloudで最高のパフォーマンス、安定性、機能性を実現するには、MariaDB >=10.6 および <=11.4を推奨します。
• データベースがトランザクションファイルロックに使われています。パフォーマンスをあげるには、可能であればメモリーのキャッシュを設定してください。 詳細については、ドキュメント↗を参照してください。
• このインスタンスには、いくつかの推奨 PHP モジュールがありません。パフォーマンスと互換性を向上させるために、これらをインストールすることを強くお勧めします: - sodium パスワードハッシュ用の Argon2 詳細については、ドキュメント↗を参照してください。

さいごに

今回の忘備録ではあまり詳しい内容は記載していませんが、Nextcloudをアップデートすると必ず出てくるエラーや警告に対処するためのポイントだけをリストしました。
詳しい内容や今回記載していないものについては過去の投稿記事を参考ください。

プライベートメモ（Private Notes Manager） は、WordPressのカスタム投稿を使い「自分だけが見られるメモ」を追加できるプラグインです。

これまでブログを運営する中で、やりたいことやアイデアなどを投稿の下書きとして書き留めてきました。
しかし、実際の記事とは関係のないカスタマイズのメモや「いつかやってみたいこと」なども下書きに保存していたため、下書きばかりが増えてしまった…という経験があります。

それを解決するために、投稿とは切り離してメモを管理でき、記事の整理にも役立つよう作成してみました。
管理画面に表示されるメモは自分専用の備忘録として活用でき、他のユーザーや訪問者には一切表示されません。
「公開するほどではないけれど、記録しておきたいこと」などアイディア次第でいろいろな用途に使用できるかもしれません。

興味のある方は、プラグインとして配布していますので、ぜひご自由にお試しください。

[wpdm_package id='1672']

・コードブロックで表示されたコードをコピーできるようにコピーボタンを設置。
バージョンはVer1.0.4となっています。

・通知設定で”通知対象がないときもメール送信を行う”を有効にしていてもメールが送信されない場合がある不具合を修正。バージョンは Ver1.0.3となっています。

・投稿がない場合、ダッシュボードの期限メモ通知にエラーが表示される場合がある不具合を修正しました。 バージョンは Ver1.0.２となっています。

・メールでのカテゴリー別通知でメールが同じものが2通送信される不具合を修正しました。
バージョンは Ver1.0.1となっています。

【プライベートメモ】とは

【プライベートメモ】は、WordPress 管理画面上で個人用のメモを管理し、期限切れや期限が近いメモを自動的に通知できるものです。既存の投稿やカスタム投稿タイプとは独立してシンプルに使えるため、日々のちょっとした備忘録からタスク管理まで活用できると思ます。

主な特徴

• 投稿タイプ「プライベートメモ」にカテゴリ・タグを設定
• 投稿記事に期限日を設定可能（カレンダー入力対応）
• 完了/未完了のステータス管理
• 通知メールを自動送信（期限切れ、当日、明日、数日前など柔軟設定）
• 通知はメール、ダッシュボード、管理画面に表示
• Gutenberg・クラシックエディター両対応
• 今すぐ通知送信ボタンあり（テスト送信にも便利）
• 通知メールの件名・本文・フッターをテンプレート化、自由にカスタマイズ
• 専用のプリビュー表示と印字ボタン設置

初期設定

設定といっても特には何もありませんが、1つだけ！
管理画面左メニューの「設定」→「パーマリンク」を開き、何も変更しなくていいので【変更を保存】を押してください。
カスタム投稿タイプを作成した後、WordPressに新しいURL構造を認識させ、カスタム投稿タイプの記事にアクセスできるようにするためです。
また、通知は必要ないという場合は、通知設定画面で通知オプションをオフにしてください。

通知設定画面について

管理画面左メニューの「プライベートメモ」→「通知設定」を開くと通知設定画面は大きく分けて3つの部分となっています。
・通知表示オプション
・メールでの通知時間設定
・メールでの通知テンプレート

順番に簡単な説明を行っていきます。

通知表示オプション

通知については、マイリスト以外は未完了の投稿だけが対象となります。

各項目について

① 通知を有効にする：通知機能を有効・無効の切り替え。必要のない場合にはチェックを外す（初期値はオン）
② 通知方法：メール／管理画面／ダッシュボードから希望のものを選択、複数選択も可能（各サンプルを参照）
③ 通知対象がないときもメール送信を行う： メール通知を対象がないときにも送信（初期値は有効）
④ 通知メール送信先：初期値はワードプレスで設定しているメールアドレスになります。（送信箇所は1か所のみ）
⑤ 通知対象：期限切れ、今日、明日、○日前、から希望の物を選択、複数選択も可能
⑥ 期限なし未完了メモも通知する：期限の設定されていない未完了投稿をすべて対象とする
⑦ マイリストの通知対象化：有効にした場合、未完了・完了に関係なくすべてが対象となりる
⑧「○日前」の通知日数：期限日が何日先の物を対象とするか

メールでの通知時間設定

通知は毎日自動で送信されます（WordPressのCronを使用）。
各項目について

① 通知送信時間：通知時刻はワードプレスで設定した時間帯が基準となります
今すぐメール通知を送信 ですぐにメール送信可能
② サーバーCronを使用する：サーバーのCronを使用して自動送信を行う場合
③ サーバーのCron コマンド：サーバー側でのcron設定時のコマンドとなります
④ エディター選択： Gutenberg、 旧エディターの選択が可能

メールでの内容確認等を行う際には手動で今すぐメール通知を送信ボタンを使ってテスト送信を行うことが出来ができます。
※ 通知方法でメールをオンにする必要があります

通知送信時間について

WordPressでは、疑似Cronが利用されており「誰かがサイトにアクセスしたとき」に定期処理が実行され、定した通知送信時間に送信します。そのため、サイトへのアクセスがないい場合には設定時間より遅延または送信されない場合もあります。
より正確に確実にスケジュール送信を望む場合は、サーバー側でCronを設定することをお勧めします。
設定の際には、サーバー側のCron実行時間を① 通知送信時間と同じ又は通知時刻の後の時間に設定をする必要があります。

メールでの通知テンプレート

各項目について

① メール件名テンプレート：件名はディフォルトで設定されていますが、ここで変更可能です。
② メール本文テンプレート：本文はディフォルトで設定されていますがプレスホルダーとを使い自由に設定可能
③ プレースホルダーを挿入：6つの内容を投入可能です。（内容は下記参照）
④ メモ一覧の表示形式：カテゴリー別一覧表示、期限別一覧表示の選択が可能（各サンプル参照）
⑤ メールフッター文：件名はディフォルトで設定されていますが、ここで変更可能です。
⑥ テンプレートを初期化：メール件名、本文、メールフッターをディフォルトに戻します。

メール本文で利用可能なプレースホルダー

メール本文で利用可能なプレースホルダー

• {datetime}：メールの通知日時
• {today}：通知日の日付
• {note_list}：対象メモ一覧リスト（カテゴリー一覧形式または期限別一覧形式）
• {note_count}：対象メモの全体の件数
• {site_name}：サイト名
• {note_list_url}：投稿一覧へのリンク

管理画面通知のサンプル

管理画面での表示項目は、通知設定で選択した対象になる通知の投稿数のみの表示となります。

管理画面通知は、右上のⓍで再度ログインするまで非表示にできます。
非表示にした後、手動で通知を更新しても次のログインまでは非表示となります。

ダッシュボード ウィジェット通知のサンプル

ダッシュボードでの通知については、通知設定で通知対象にした投稿のタイトル一覧が表示されます

マイリストの対象メモが通知対象期限の中に含まれる場合には黄枠のように⚠️が表示されます。
タイトル横の右端に表示されるリンクアイコンで直接編集画面へ移動ができます。
通知は毎回、ワードプレスにログイン時に更新されますが、”通知を更新”で手動でも更新できます。
手動で更新後、管理画面通知の下にメッセージが表示されます（管理画面通知のサンプル参照）

メール通知のサンプル

通知設定で通知方法でメールをオンにしている場合に、2通りの表示形式を選択が可能となります。
またメール通知はhtml形式（リッチテキスト軽視）となります。

・カテゴリー別表示形式

赤矢印の[確認]をクリックするとメモの編集画面へリンクします。
※ リンクを開くとワードプレスへのログインが求められます。ログインしない場合には開くことはできません。
マイリストをオンにしているメモについては、対象カテゴリーには含まれないようにしています。
カテゴリーよりもマイリストを優先させ重複しないようにしています。

・期限別表示形式

赤矢印の[確認]をクリックするとメモの編集画面へリンクします。
※ リンクを開くとワードプレスへのログインが求められます。ログインしない場合には開くことはできません。
期間別については、ダッシュボード通知と同じく、マイリストと重複するものについては黄枠のように表示されます。

テスト・確認方法

メールでの通知が機能しているか確認するには：

1. 「通知設定」画面で「今すぐ送信」ボタンをクリック
2. 登録済みのメモの中で、対象条件に合うものがあれば通知が届きます
3. メールが届かない場合は、迷惑メール フォルダーなどを確認、また送信先メールアドレスも確認ください

プライベートメモの使い方

使い方といっても通常の投稿記事と同じで特にはありませんが念のため。
プラグインを有効にすると左端のメニューに”プライベートメモ”が表示されます
メニューは
・プライベートメモ ⇨ プライベートメモ投稿一覧
・投稿を追加 ⇨ 新規投稿を追加
・メモカテゴリ ⇨ メモ専用のカテゴリー
・メモタグ ⇨ メモ専用のタグ
・通知設定 ⇨ 通知関連の設定画面
となります

メモの追加

管理画面左メニューの「プライベートメモ」→「投稿を追加」
投稿編集画面はシンプルな構成となります
右に表示されるサイドバーも項目を少なくしています

・右サイドバーで「期限日」を選択、なければ設定の必要なし
・「ステータス」で「未完了」 or 「完了」を選択、初期値は「未完了」
・「マイリスト」マイリストに追加するかしないか。マイリストに追加すると通知設定や一覧での絞り込みに対応
※ 保存をすると自動的に投稿のステータスが”公開”となります。またステータスの初期設定は”未完了”となります。

プレビュー表示

通常の投稿編集と同じようにプレビュー表示ができますが、プライベートメモ専用のプレビュー表示となります。

本文以外（サイドバー、ヘッダー、フッターなど）は全て表示されないようになっています。
本文の上に管理バーだけの表示となります。またスタイルについて、投稿編集画面では各テーマのスタイルが反映さていますが、プレビューではテーマのスタイルは反映されずシンプルなものになっています。
タイトルの下にステータス（未完了・完了）と期限日があれば表示されます
また、プレビュー画面の右上に”印刷する”ボタンを設置しています。

プライベートメモ投稿一覧

• 一覧画面上部からカテゴリ・タグ・ステータス・マイリストで絞り込みが可能
  ※ テーマによっては絞り込みボタンを押すと一覧に何も表示されなくなる場合がありますが、もう一度押すと絞り込みされた一覧が表示されます。
• 期限日順でソート可能
• 一覧上で各投稿の右端にあるステイタス切り替えボタンで「未完了・完了」の変更が可能
  

クイック編集

• クイック編集を開くと、ステータスがラジオボタンで変更が可能
• カテゴリ、タグの選択が可能
• 期限の設定・変更が可能
• マイリストへの追加が可能

注意点

1. インストール後、必ずワードプレス設定にあるパーマリンクで保存をしてください。（何も変更する必要はありません、保存のみ行ってください）
2. プレビューで表示したくないもの、目次やスポンサーなどのassets/css/preview.cssに追記することで非表示にできます。

参考までに下記がpreview.cssの内容となります。

/* --- 通常画面用スタイル --- */
body {
  font-family: sans-serif;
  background: none !important;
}

.print-button-container {
  text-align: right;
  margin: 1em 0;
}

.print-button {
  background: #0073aa;
  color: white;
  border: none;
  padding: 0.5em 1em;
  font-size: 1em;
  cursor: pointer;
  border-radius: 4px;
}

/* ステータスバッジ */
.note-status-label {
  display: inline-block;
  padding: 0.3em 0.6em;
  border-radius: 4px;
  font-weight: bold;
  color: #000;
}
.note-status-complete {
  background-color: #c8f7c5;
}
.note-status-incomplete {
  background-color: #ffe9b3;
}

/* ステータスと期限日横並び */
.note-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5em;
  margin-bottom: 1em;
  font-size: 1em;
  align-items: center; 
}

/* 見出し共通スタイル */
.entry-header h1 {
  font-size: 2em;
  font-weight: 700;
  border-bottom: 3px solid #333;
  padding-bottom: 0.3em;
  margin-bottom: 1em;
  color: #222;
}

.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  margin-top: 2em;
  margin-bottom: 1em;
  font-weight: bold;
  color: #2a2a2a;
  position: relative;
  padding-left: 0.6em;
}

.entry-content h2::before,
.entry-content h3::before,
.entry-content h4::before,
.entry-content h5::before,
.entry-content h6::before {
  content: "";
  position: absolute;
  top: 0.1em;
  left: 0;
  width: 4px;
  height: 100%;
  background-color: #0073aa;
}

/* サイズ階層 */
.entry-content h2 { font-size: 1.5em; }
.entry-content h3 { font-size: 1.3em; }
.entry-content h4 { font-size: 1.15em; }
.entry-content h5 { font-size: 1em; }
.entry-content h6 { font-size: 0.95em; }

/* --- 印刷専用スタイル --- */
@media print {
  .print-button-container,
  #wpadminbar {
    display: none !important;
  }

  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .note-status-label {
    background-color: inherit !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .note-status-complete {
    background-color: #c8f7c5 !important;
  }

  .note-status-incomplete {
    background-color: #ffe9b3 !important;
  }

  .entry-content h2::before,
  .entry-content h3::before,
  .entry-content h4::before,
  .entry-content h5::before,
  .entry-content h6::before {
    background-color: #0073aa !important;
  }
}

目次やスポンサーなどを非表示にしたい場合上記のpreview.cssに追記ください。
下記は一例です。

例：目次、スポンサーなどを非表示 （ Cocoonの場合）
.toc-content {
      display: none;
    } 
.ad-label {
      display: none;
    }

Q＆A

Q1. 通知されないメモがある

• 通知設定で通知対象にチェックが入っているか確認
• 期限日・ステータスが正しく設定されているか確認
  ※マイリスト以外は未完了の投稿のみが対象

Q2. Cron 実行時間を変更したい

• 通知設定の「通知送信時間」を変更すれば、自動実行される時刻が更新されます
• サーバー Cron を利用している場合は、サーバー側のスケジュール時刻も合わせて調整してください

Q8. メール通知が届かないのですが？

A. 通知メールが届かない場合、以下を確認してください：

• 通知機能が「有効」になっているか（設定画面で確認）
• 通知先メールアドレスが正しいか
• サーバー側でメール送信が許可されているか（WP Mail SMTPなどで確認）
• 通知対象が存在しない（未完了・期限内メモがない）場合は送信されない設定になっていないか

さいごに

【プライベートメモ】は、できるだけシンプルにメモを残すことを目的としています。
「ちょっとしたメモを非公開で残せたら…」という思いから自分だけのメモスペースとして、また日々の気づきややってみたことなどのメモとしてお役立立てれば嬉しいです。
「こんなことも記録しておけばよかった」と思えるような気づきが増えていくかもしれません。
気になった方は、ぜひ一度お試しください。

ブログ記事タイトルや任意のテキスト、リンクをスクロール表示できる”スクロールマーキーウィジェット”を作ってみました。今まではHTMLでコードを書いて設置をしていたのですが、もっと簡単に設置したいと思いChatGPTに相談をしながら簡単にウィジェットで設定できるようにプラグイン化し作成してみました。ウィジェットで設定したものをショートコードでも設置可能としています。
お知らせや注目情報、プロモーションリンクの掲出ができるようになっています。興味のある方は使ってみてください。（もちろん無料配布です）

主な特徴

• 通常スクロール
• 左端で一時停止付きスクロール
• 中央で1件ずつ表示
• パックマン風アニメーション

• 投稿記事、任意のテキストや外部リンクが混在可能
• 表示順序のカスタマイズ（例：投稿→テキスト→リンク）
• スクロールスタイルを4種類から選択可能
  • 通常スクロール
  • 左端で一時停止付きスクロール
  • 中央で1件ずつ表示
  • パックマン風アニメーション
• アイコン・文字色・背景色・フォントサイズ・背景の高さなどの見た目を設定可能
• 表示速度やループ回数も調整可能
• ウィジェットで設定した内容をショートコードで任意の場所に設置可能

[wpdm_package id='1521']

ウィジェットの使い方

管理画面でウィジェットを追加

外観 > ウィジェット から「スクロールマーキーウィジェット」を任意のウィジェットエリアに追加します。

必要な情報を入力

① 表示順序 ‐ 投稿／テキスト／リンクの並び順を選択可能
② 表示スタイル ‐ 4つのスタイルから選択可能
③ 投稿ID ‐ 表示したい投稿のIDをカンマ区切りで入力（例：12,24,35）
④ 投稿リンクの開き方 ‐ 同一タブ・新しいタブ
⑤ テキスト ‐ 任意のテキストを1行ずつ入力
⑥ 外部リンク ‐ title=タイトル, url=https://example.comで入力
⑦ 外部リンクの開き方 ‐ 同一タブ・新しいタブ
⑧ アイコン/色 ‐ Font Awesomeクラス名で指定（例：fa fa-star）
⑨ フォントサイズ/色 - 任意の単位で入力（例：16px, 1.5em）
⑩ 行間/色 ‐ 背景の高さを任意の単位で入力（例：16px, 1.5em）
⑪ スクロール速度 ‐ 0.1 ～ 20 の範囲で調整（遅い～早い）
⑫ ループ回数 ‐ 0で無限ループ、指定回数で停止、非表示となる
⑬ このウィジェットのID ‐ ショートコードの内容表示

表示スタイルについて

補足注意事項

ショートコードでの使用方法

ショートコードを使えば、記事本文や固定ページ内にもウィジェットで設定した内容で表示が可能です。

使用例

設定したウィジェットを保存後、入力画面の下の部分に表示される ”ショートコードで使用するには” で表示されたショートコードを好きな場所に貼り付けて設置可能

例：
[scrolling_items widget_id="scroll_marquee_widget-18"]

ショートコードだけで設置したい場合は、ウィジェットを設定後、ウィジェットを非表示することで設置可能
ショートコードを使って複数設置する場合、競合してうまく表示されないことがあります。
特に、投稿記事ページで複数表示の場合（例：本文中、サイドバー、タイトル上などに同時に設置した場合）

ウィジェットを非表示について

テーマでCocoonを使っている場合には、各ウィジェットの入力画面に”表示設定”がありますので、そこで”チェック・入力したページで表示する”を選択し全てのチェックがされていない状態で保存をします。
また、Cocoon以外のテーマを使用し、ウィジェットの入力画面に”表示設定”がない場合には、こちらのプラグインで代用することが可能ですのでご利用ください。
※ 表示モードで非表示期間設定にするだけです。

使用にあたっての注意事項

このプラグインは同じページ内に1つのスクロールマーキーウィジェットを設置する前提で作りこんでいます。
その為、複数のスクロールマーキーウィジェットを別スタイルで設置した場合、お互いの表示スタイルが干渉し正しく表示されない場合があります。

以前投函した【表示期間等を指定できるウィジェット”Scheduled Widge”を作って実装してみた】で紹介したウィジェットですが、使い勝手を良くしたいと思いワードプレスで使用している全てのウィジェットに追加機能として組み込むように変更をし、プラグイン化してみました。
ウィジェットスケジュール指定追加機能は、WordPressのウィジェット表示に「表示期間・曜日・時間帯・除外期間」などの条件設定を加えることができる便利なプラグインです。
イベント告知・キャンペーン・期間限定の案内など、「ある時間だけウィジェットを表示したい」というものに活用できます。
興味のある方はお試しください。（もちろん無料配布です）

主な機能

• 表示開始日／終了日の設定
  指定した期間のみウィジェットを表示できます。
• 曜日の指定
  曜日ごとに表示・非表示を制御できます。
• 時間帯の設定
  午前・午後などの時間単位で制御できます。
• 除外期間の設定
  通常の表示期間中でも、一部の期間だけ除外できます。
• ウィジェット個別に設定
  すべてのウィジェットに共通して、個別設定が可能です。
• 不要な設定はスキップ可能
  条件を何も設定しなければ、通常通り表示されます。

ダウンロードは⇩から

[wpdm_package id='1522']

使用例

• 期間限定セールバナーを指定の日時だけ表示
• 週末だけ特別なメッセージを表示
• 深夜帯には特定の案内を非表示にする
• イベント前の告知と、イベント終了後の非表示

使い方

説明するほどの内容ではありませんが念のため。

プラグインをインストール後、有効化するとウィジェットの下の方に赤矢印のように”表示期間設定を開く／閉じる” ボタンが表示されます。
ボタンを押すと入力フォームが現れます。

※ 青い矢印の部分はChuyaさん公開の ”ウィジェットに「PC・モバイル表示切り替え」オプションをついかする方法” を利用させていただいています。

表示期間設定ボタンを押すと入力フォームが表示されます。

各項目の内容は

① 現在のサーバー時間 ‐ この時間が設定時の基本日時となります

② 表示モード ‐ 表示期間/非表示期間の選択

③ 開始日時/終了日時設定

④ 曜日指定 ‐ 対象となる曜日を指定できます

⑤ 除外期間設定 ‐ 設定期間中に除外期間を設定したい場合に使用。
※  ”除外期間を設定する” にチェックを入れたときだけ入力画面が表示されます。

期間等の入力後、保存をすると後で設定をしたかどうかが分かるように表示を変えています。

表示期間などの設定項目がある場合には赤枠のように”設定あり”が表示されます。

”設定あり”は下記の場合に表示されます。
・開始日/終了日が入力されている
・時間が入力されている
※ 開始日の時間の欄が、ブランクまたは00：00以外、終了日の時間の欄がブランクまたは23：59以外の時間が入力されている。
・曜日が1つでもチェックが外れている場合
・”除外期間を設定する”にチェエクが入っている場合
※ 除外期間の設定に日時の入力の有無にかかわらずチェエクされている場合

注意事項

キャッシュ関連のプラグインを使用している場合は、キャッシュが更新されないと期間指定がうまく作動しません。
キャッシュ更新については各プラグインの注意事項等をご確認ください。
WP Fastest Cache プラグインを使用している場合は下記記事をご参考ください。