WordPress – 水色（仮）

2025年5月1日2025年5月1日

カテゴリーアーカイブのページで、WP_Query パラメーター ‘posts_per_page’ で1ページあたりの投稿数を指定している場合、ページネーションが最終ページで404になる現象について stackoverflow.com で協力を得てひとまず解決した。

https://stackoverflow.com/questions/79589723/wp-query-pagination-on-category-archive-returns-404-on-last-page

この現象について、何でいままで気づかなかったのだろうか…

—

2024年10月15日2024年10月15日

WordPressで画像をアップロードした際に、画像ファイル名を自動的に説明、ALT、タイトル、キャプションに設定する / Automatically set image filename to description, ALT, title, and caption when uploading images in WordPress

/**
 * WordPressで画像をアップロードした際に、画像ファイル名を自動的に説明、ALT、タイトル、キャプションに設定する
 *
 * - タイトル：画像のファイル名は自動的に画像のタイトルになります（WordPressの標準動作）。
 * - キャプション：キャプションが空の場合、画像のファイル名をキャプションに設定します。
 * - 説明：説明が空の場合、画像のファイル名を説明に設定します。
 * - Altテキスト：Altテキストが空の場合、画像のファイル名をAltテキストに設定します。
 */
add_action('add_attachment', function ($post_ID) {
    $image = \get_post($post_ID);
    $image_title = $image->post_title;

    // If there is no caption, set the filename as caption
    if (empty($image->post_excerpt)) {
        $image->post_excerpt = $image_title; // Caption
    }

    // If there is no description, set the filename as description
    if (empty($image->post_content)) {
        $image->post_content = $image_title; // Description
    }

    // Update Alt text if it’s empty
    if (!\get_post_meta($post_ID, '_wp_attachment_image_alt', true)) {
        \update_post_meta($post_ID, '_wp_attachment_image_alt', $image_title); // Alt text
    }

    // Update the image post
    \wp_update_post($image);
});

/**

* WordPressで画像をアップロードした際に、画像ファイル名を自動的に説明、ALT、タイトル、キャプションに設定する

* - タイトル：画像のファイル名は自動的に画像のタイトルになります（WordPressの標準動作）。

* - キャプション：キャプションが空の場合、画像のファイル名をキャプションに設定します。

* - 説明：説明が空の場合、画像のファイル名を説明に設定します。

* - Altテキスト：Altテキストが空の場合、画像のファイル名をAltテキストに設定します。

add_action('add_attachment', function ($post_ID) {

$image = \get_post($post_ID);

$image_title = $image->post_title;

// If there is no caption, set the filename as caption

if (empty($image->post_excerpt)) {

$image->post_excerpt = $image_title; // Caption

}

// If there is no description, set the filename as description

if (empty($image->post_content)) {

$image->post_content = $image_title; // Description

}

// Update Alt text if it’s empty

if (!\get_post_meta($post_ID, '_wp_attachment_image_alt', true)) {

\update_post_meta($post_ID, '_wp_attachment_image_alt', $image_title); // Alt text

}

// Update the image post

\wp_update_post($image);

});

2024年10月15日2024年10月15日

WordPress メディアライブラリグリッド表示にタイトル追加 / Adding titles to the WordPress Media Library grid

// WordPress メディアライブラリ グリッド表示にタイトル追加
add_action('admin_footer', function () {
    ?>
<script type="text/javascript">
    var timerID_wmg123;
    document.addEventListener("DOMContentLoaded", () => {

        const targetNode = document.getElementById('wp-media-grid'); // 監視対象の要素を指定
		if (!targetNode) {
			return;
		}
        const config = { attributes: true, childList: true, subtree: true };

        const callback = function(mutationsList, observer) {
            clearTimeout(timerID_wmg123);
            timerID_wmg123 = setTimeout(() => {
                const li = document.querySelectorAll('.media-frame.mode-grid li.attachment.save-ready');

                for (const mutation of mutationsList) {
                    if (mutation.type !== 'childList') {
                        continue;
                    }

                    console.log('A child node has been added or removed.');

                    for (let i = 0; i < li.length; i++) {
                        let ariaLabel = li[i].getAttribute('aria-label');

                        // 既にタイトルが存在するか確認
                        if (!li[i].querySelector('.title-div')) {
                            // 新しい div 要素を作成してタイトルを追加
                            let titleDiv = document.createElement('div');
                            titleDiv.classList.add('title-div');  // クラス名を追加して一度処理したことを識別
                            titleDiv.style.textAlign = 'center';
                            titleDiv.style.marginTop = '5px';
                            titleDiv.style.fontSize = '12px';
                            titleDiv.style.lineHeight = '1';
                            titleDiv.style.color = '#333';
                            titleDiv.style.height = '26px';
                            titleDiv.style.overflowY = 'hidden';
                            titleDiv.textContent = ariaLabel;
                            li[i].appendChild(titleDiv);  // タイトルをサムネイルに追加
                        }
                    }
                }
            }, 200);
        };

        const observer = new MutationObserver(callback);
        observer.observe(targetNode, config);

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

// WordPress メディアライブラリグリッド表示にタイトル追加

add_action('admin_footer', function () {

var timerID_wmg123;

document.addEventListener("DOMContentLoaded", () => {

const targetNode = document.getElementById('wp-media-grid'); // 監視対象の要素を指定

if (!targetNode) {

return;

}

const config = { attributes: true, childList: true, subtree: true };

const callback = function(mutationsList, observer) {

clearTimeout(timerID_wmg123);

timerID_wmg123 = setTimeout(() => {

const li = document.querySelectorAll('.media-frame.mode-grid li.attachment.save-ready');

for (const mutation of mutationsList) {

if (mutation.type !== 'childList') {

continue;

}

console.log('A child node has been added or removed.');

for (let i = 0; i < li.length; i++) {

let ariaLabel = li[i].getAttribute('aria-label');

// 既にタイトルが存在するか確認

if (!li[i].querySelector('.title-div')) {

// 新しい div 要素を作成してタイトルを追加

let titleDiv = document.createElement('div');

titleDiv.classList.add('title-div'); // クラス名を追加して一度処理したことを識別

titleDiv.style.textAlign = 'center';

titleDiv.style.marginTop = '5px';

titleDiv.style.fontSize = '12px';

titleDiv.style.lineHeight = '1';

titleDiv.style.color = '#333';

titleDiv.style.height = '26px';

titleDiv.style.overflowY = 'hidden';

titleDiv.textContent = ariaLabel;

li[i].appendChild(titleDiv); // タイトルをサムネイルに追加

}

}, 200);

};

const observer = new MutationObserver(callback);

observer.observe(targetNode, config);

});

</script>

<?php

});

2024年6月25日2024年7月2日

Welcart Shop で Kuroneko Web Collect Dialog を画面中央に表示する再び

jQuery UI Dialog で表示しているので、dialogfocus と observer を使って画面の中央に移動。できれば CSS のみで済ませたいです。

(function () {

    // Display the Kuroneko Web Collect Dialog in the center of the screen on Welcart Shop
    jQuery("body").bind("dialogfocus", function (e) {
        const resizeable = e.target;
        const observer = new MutationObserver(() => {
            const d = jQuery('#kuroneko_web-dialog');
            d.css({ left: 0 }); // 正しい幅を取得するために一旦左端に移動
            d.css({
                left: (jQuery(window).width() - d.outerWidth(true)) / 2 + "px",
                top: (jQuery(window).height() - d.height()) / 2 + jQuery(window).scrollTop() + "px"
            });
        });
        observer.observe(resizeable, {
            attriblutes: true,
            childList: true,
            subtree: true,
        });
    });

})();

(function () {

// Display the Kuroneko Web Collect Dialog in the center of the screen on Welcart Shop

jQuery("body").bind("dialogfocus", function (e) {

const resizeable = e.target;

const observer = new MutationObserver(() => {

const d = jQuery('#kuroneko_web-dialog');

d.css({ left: 0 }); // 正しい幅を取得するために一旦左端に移動

d.css({

left: (jQuery(window).width() - d.outerWidth(true)) / 2 + "px",

top: (jQuery(window).height() - d.height()) / 2 + jQuery(window).scrollTop() + "px"

});

observer.observe(resizeable, {

attriblutes: true,

childList: true,

subtree: true,

});

})();

#kuroneko_web-dialog
	border: 4px solid transparent
	background-color: transparent
	max-width: 100%
	.ui-dialog-titlebar
		padding: 6px 1% 5px 1%
		text-align: center
		height: auto !important
		background-color: #fff
		border-top: 1px solid #333
		border-left: 1px solid #333
		border-right: 1px solid #333
		border-top-left-radius: 4px
		border-top-right-radius: 4px
		background-color: aliceblue
	.ui-dialog-titlebar-close
		display: none
#kuroneko_web-token-dialog
	background-color: #fff
	border-left: 1px solid #333
	border-bottom: 1px solid #333
	border-right: 1px solid #333
	border-bottom-right-radius: 4px
	border-bottom-left-radius: 4px
.ui-widget-overlay
	background-color: #c6c6c6
.ui-dialog
	box-shadow: none

#kuroneko_web-dialog

border: 4px solid transparent

background-color: transparent

max-width: 100%

.ui-dialog-titlebar

padding: 6px 1% 5px 1%

text-align: center

height: auto !important

background-color: #fff

border-top: 1px solid #333

border-left: 1px solid #333

border-right: 1px solid #333

border-top-left-radius: 4px

border-top-right-radius: 4px

background-color: aliceblue

.ui-dialog-titlebar-close

display: none

#kuroneko_web-token-dialog

background-color: #fff

border-left: 1px solid #333

border-bottom: 1px solid #333

border-right: 1px solid #333

border-bottom-right-radius: 4px

border-bottom-left-radius: 4px

.ui-widget-overlay

background-color: #c6c6c6

.ui-dialog

box-shadow: none

さらに下記を適用することでモバイル端末でも見やすく表示：

見た目の良いレスポンシブなテーブルを作成 / Creating visually appealing responsive tables

2023年11月28日

WordPress 絵文字や太文字を使った投稿に失敗する場合 / If posting using WordPress emojis or bold text fails

次の操作で解消した：

※作業前のデータベースのバックアップをお忘れなく

phpMyAdmin

操作
照合順序
utf8mb4_general_ci
[チェック] すべてのテーブルの照合順序を変更
[チェック] すべてのテーブルのカラム照合順序を変更する
実行