WordPress – ページ 3 – 水色（仮）

2019年8月6日2020年2月3日

Page Builder by SiteOrigin のメモ / tips

カラムを左右入れ替える / Swap columns left and right

Row > CSS Style

flex-direction: row-reverse

1	flex-direction: row-reverse

カラムを横並びのままにする / Keep columns side by side

Row > Row Class

parallels

parallels

SASS / CSS

@media screen and (min-width: 539px) and (max-width: 768px)	// 要調整 539px < width <= 768px
	.parallels
		-webkit-flex-direction: row !important
		-ms-flex-direction: row !important
		flex-direction: row !important
		.panel-grid-cell
			width: initial !important
			min-width: 36% !important		// 要調整
		.panel-grid-cell
			padding-right: 30px !important	// 要調整
		.panel-grid-cell:last-child
			padding-right: 0 !important		// 要調整

@media screen and (min-width: 539px) and (max-width: 768px) // 要調整 539px < width <= 768px

.parallels

-webkit-flex-direction: row !important

-ms-flex-direction: row !important

flex-direction: row !important

.panel-grid-cell

width: initial !important

min-width: 36% !important // 要調整

.panel-grid-cell

padding-right: 30px !important // 要調整

.panel-grid-cell:last-child

padding-right: 0 !important // 要調整

2019年6月1日2019年6月1日

プラグイン Recent Posts Widget With Thumbnails にギャラリーからも画像を見つける機能を追加する / Add the ability to find images from the gallery, too

/wp-content/plugins/recent-posts-widget-with-thumbnails/recent-posts-widget-with-thumbnails.php:

    /**
     * Returns the id of the first image on gallery in the content, else 0
     *
     * @access   private
     * @since     6.5.0, 2019-06-01
     *
     * @return    integer    the post id of the first content image
     */
    function get_first_gallery_image_id() {
        $post = get_post();
        $content = $post->post_content;

        if (!preg_match('/\[gallery\s+[^\]]*ids=.*?"([0-9,]+).*?"[^\]]*\]/', $content, $matches)) {
            return 0;
        }
        $ids = explode(',', $matches[1]);
        return $ids[0];
    }

    /**
     * Echoes the thumbnail of first post's image and returns success
     *
     * @access   private
     * @since     2.0
     *
     * @return    bool    success on finding an image
     */
    private function the_first_post_image () {
        // look for first image
        $thumb_id = $this->get_first_content_image_id();
        // if there is first image then show first image
        if ( $thumb_id ) :
            echo wp_get_attachment_image( $thumb_id, $this->customs[ 'thumb_dimensions' ] );
            return true;
        else :
            $thumb_id = $this->get_first_gallery_image_id();
            if ( $thumb_id ) :
                echo wp_get_attachment_image( $thumb_id, $this->customs[ 'thumb_dimensions' ] );
                return true;
            else :
                return false;
            endif;
        endif; // thumb_id
    }

/**

* Returns the id of the first image on gallery in the content, else 0

* @access private

* @since 6.5.0, 2019-06-01

* @return integer the post id of the first content image

function get_first_gallery_image_id() {

$post = get_post();

$content = $post->post_content;

if (!preg_match('/\[gallery\s+[^\]]*ids=.*?"([0-9,]+).*?"[^\]]*\]/', $content, $matches)) {

return 0;

}

$ids = explode(',', $matches[1]);

return $ids[0];

}

/**

* Echoes the thumbnail of first post's image and returns success

* @access private

* @since 2.0

* @return bool success on finding an image

private function the_first_post_image () {

// look for first image

$thumb_id = $this->get_first_content_image_id();

// if there is first image then show first image

if ( $thumb_id ) :

echo wp_get_attachment_image( $thumb_id, $this->customs[ 'thumb_dimensions' ] );

return true;

else :

$thumb_id = $this->get_first_gallery_image_id();

if ( $thumb_id ) :

echo wp_get_attachment_image( $thumb_id, $this->customs[ 'thumb_dimensions' ] );

return true;

else :

return false;

endif;

endif; // thumb_id

}

2019年5月18日2019年5月18日

指定したウィジェットを WordPress の管理画面に配置し、その中で Youtube ビデオの縦横比を保つ / Placing specific widgets to WordPress Admin Screen and keep the Youtube video aspect ratio within

/wp-content/themes/my-theme/functions.php:

register_sidebar(array(
    'name' => sprintf("%s", __('Admin Screen')),
    'id' => 'admin',
    'description' => '',
    'before_widget' => '<div class="admin widget"><div class="widget-inner">',
    'after_widget' => '</div></div>',
    'before_title' => '<h3 class="widget-title">',
    'after_title' => '</h3>'
));

add_action('wp_dashboard_setup', function () {
    wp_add_dashboard_widget('wp_dashboard_widget', 'May I help you?', function () {
        ob_start();		// start buffering output
        dynamic_sidebar('admin');
        $aspectRatio = 9 / 16 * 100; // 56.25%
        ?>
        <style type="text/css">
        .responsive-video {
            position: relative;
            width: 100%;
            padding-top: <?php echo $aspectRatio; ?>%;
        }
        .responsive-video > iframe {
            position: absolute;
            top: 0;
            right: 0;
            width: 100% !important;
            height: 100% !important;
        }

        #wp_dashboard_widget h2 {
            background-color: #f2ff9c;
        }
        #wp_dashboard_widget h3 {
            font-weight: bold;
        }
        </style>
        <?php
        $buffer = ob_get_contents();	// buffered output to variable
        ob_end_clean();					// end buffering

        // Keep the Youtube video aspect ratio.
        if (preg_match('/<iframe[^>]+?(\/www\.youtube\.com\/)[^>]+?>[^<>]*?<\/iframe>/', $buffer, $matches)) {
            $buffer = str_replace($matches[0], '<div class="responsive-video">'.$matches[0].'</div>', $buffer);
        }

        echo $buffer;
    });
});

register_sidebar(array(

'name' => sprintf("%s", __('Admin Screen')),

'id' => 'admin',

'description' => '',

'before_widget' => '<div class="admin widget"><div class="widget-inner">',

'after_widget' => '</div></div>',

'before_title' => '<h3 class="widget-title">',

'after_title' => '</h3>'

));

add_action('wp_dashboard_setup', function () {

wp_add_dashboard_widget('wp_dashboard_widget', 'May I help you?', function () {

ob_start(); // start buffering output

dynamic_sidebar('admin');

$aspectRatio = 9 / 16 * 100; // 56.25%

.responsive-video {

position: relative;

width: 100%;

padding-top: <?php echo $aspectRatio; ?>%;

}

.responsive-video > iframe {

position: absolute;

top: 0;

right: 0;

width: 100% !important;

height: 100% !important;

}

#wp_dashboard_widget h2 {

background-color: #f2ff9c;

}

#wp_dashboard_widget h3 {

font-weight: bold;

}

</style>

<?php

$buffer = ob_get_contents(); // buffered output to variable

ob_end_clean(); // end buffering

// Keep the Youtube video aspect ratio.

if (preg_match('/<iframe[^>]+?(\/www\.youtube\.com\/)[^>]+?>[^<>]*?<\/iframe>/', $buffer, $matches)) {

$buffer = str_replace($matches[0], '<div class="responsive-video">'.$matches[0].'</div>', $buffer);

}

echo $buffer;

});

2019年3月22日2019年3月26日

“dashicons.min.css” を読み込まないようにする, 但しログイン中と管理画面を表示している場合を除く / Disable reading “dashicons.min.css” when not logged in and in admin page on WordPress

<?php
/*
Plugin Name: deregister dashicons
Plugin URI:
Description: Remove dashicons.min.css from frontend
Author:
Author URI:
Donate link:
Tags:
Requires at least: 4.1
Tested up to: 4.9.5
Version: 1.0.0
License:
License URI:

How to remove dashicons.min.css from frontend?
https://wordpress.stackexchange.com/questions/161476/how-to-remove-dashicons-min-css-from-frontend/161482
*/

namespace deregister_dashicons;

if (!is_admin()) {
    add_action('plugins_loaded', 'deregister_dashicons\wp_print_scripts');
}

function wp_print_scripts () {
    if (!is_user_logged_in()) {
        add_action('wp_print_styles', 'deregister_dashicons\deregister_styles', 100);
    }
}

function deregister_styles() {
    wp_deregister_style('dashicons');
}

<?php

Plugin Name: deregister dashicons

Plugin URI:

Description: Remove dashicons.min.css from frontend

Author:

Author URI:

Donate link:

Tags:

Requires at least: 4.1

Tested up to: 4.9.5

Version: 1.0.0

License:

License URI:

How to remove dashicons.min.css from frontend?

https://wordpress.stackexchange.com/questions/161476/how-to-remove-dashicons-min-css-from-frontend/161482

namespace deregister_dashicons;

if (!is_admin()) {

add_action('plugins_loaded', 'deregister_dashicons\wp_print_scripts');

}

function wp_print_scripts () {

if (!is_user_logged_in()) {

add_action('wp_print_styles', 'deregister_dashicons\deregister_styles', 100);

}

function deregister_styles() {

wp_deregister_style('dashicons');

}

2018年10月26日2018年10月26日

This way is temporary support to Gutenberg for Metabox in a WordPress classic plugin

クラシックなプラグインでメタボックスを使用していたら保存ができなくなったので暫定的な対処をしてみた。Gutenberg 4.1.1, WordPress 5.1 alpha

<?php
// the-plugin.php

// Using classic MetaBox and Gutenberg, save and update error Unhandled promise rejection...
if ($_GET['action'] === 'edit' && $_GET['post'] && $_GET['classic-editor'] && $_GET['meta_box']) {
    header("HTTP/1.1 200 OK");
    // your code
    exit(0);
}

// plugin code...

<?php

// the-plugin.php

// Using classic MetaBox and Gutenberg, save and update error Unhandled promise rejection...

if ($_GET['action'] === 'edit' && $_GET['post'] && $_GET['classic-editor'] && $_GET['meta_box']) {

header("HTTP/1.1 200 OK");

// your code

exit(0);

}

// plugin code...

spinner is moving…