创建一个CPT以编辑短码话务员

时间:2021-04-06 作者:stemon

我创建了一个旋转木马,并用快捷码显示它,并将图像和文本作为属性传递。然而,短代码最终很难在需要时阅读和编辑。不便于用户使用。

[lytbox_carousel type="1" imagesid="68/|/ 66/|/ 63/|/ 61" headings="This is a Heading/|/ This is a Heading /|/ This is a Heading /|/ This is a Heading " texts="Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus illum quam quod reprehenderit possimus dolor ut magnam nesciunt, eos excepturi./|/ Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus illum quam quod reprehenderit possimus dolor ut magnam nesciunt, eos excepturi./|/ Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus illum quam quod reprehenderit possimus dolor ut magnam nesciunt, eos excepturi./|/ Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus illum quam quod reprehenderit possimus dolor ut magnam nesciunt, eos excepturi. "  ]
如何创建一个生成短代码的CPT,用户可以在自定义字段中选择图像和文本。就像其他滑块插件一样?短代码显示在admin中的CPT页面上,例如此elementor模板短代码。

enter image description here

1 个回复
SO网友:Kirtan

在上添加以下代码functions.php 文件,就这样。。。。。。。。。。。。。。。

在这里,我使用滑动条来显示旋转木马视图,您可以根据自己的选择进行更改

enter image description here

<替换wordpost 在下面的行中使用受人尊敬的post slug
add_meta_box ( \'customdiv\', \'Image Gallery\', \'custom_print_box\', \'post\', \'normal\', \'high\' );

&&

manage_post_posts_columns

&&

manage_post_posts_custom_column

<只需在如下内容区域中添加短代码

enter image description here

<下面的代码完全基于您的要求
/*
 * Add a meta box
 */
add_action ( \'admin_menu\', \'custom_meta_box_add\' );
function custom_meta_box_add() {
    add_meta_box ( \'customdiv\', \'Image Gallery\', \'custom_print_box\', \'post\', \'normal\', \'high\' );
}

/*
 * Meta Box HTML
 */
function custom_print_box($post) {
    $meta_key = \'some_custom_gallery\';
    echo custom_gallery_field ( $meta_key, get_post_meta ( $post->ID, $meta_key, true ) );
}

/*
 * Save Meta Box data
 */
add_action ( \'save_post\', \'custom_save\' );
function custom_save($post_id) {
    if( defined ( \'DOING_AUTOSAVE\' ) && DOING_AUTOSAVE )
        return $post_id;

    $meta_key = \'some_custom_gallery\';
    update_post_meta ( $post_id, $meta_key, $_POST[ $meta_key ] );
    return $post_id;
}

function custom_gallery_field($name, $value = \'\') {
    $html   = \'<div><ul class="custom_gallery_mtb">\';
    $hidden = array ();
    if( $images = get_posts ( array (
        \'post_type\'      => \'attachment\',
        \'orderby\'        => \'post__in\',
        \'order\'          => \'ASC\',
        \'post__in\'       => explode ( \',\', $value ),
        \'numberposts\'    => -1,
        \'post_mime_type\' => \'image\'
            ) ) ) {

        foreach ( $images as $image ) {
            $hidden[]  = $image->ID;
            $image_src = wp_get_attachment_image_src ( $image->ID, array ( 80, 80 ) );
            $html      .= \'<li data-id="\' . $image->ID . \'"><div><image src="\' . $image_src[ 0 ] . \'" height="100px" width="100px"/></div><a href="#" class="custom_gallery_remove">Remove Image</a></li>\';
        }
    }

    $html .= \'</ul><div style="clear:both"></div></div>\';
    $html .= \'<input type="hidden" name="\' . $name . \'" value="\' . join ( \',\', $hidden ) . \'" /><a href="#" class="button custom_upload_gallery_button">Add Images</a>\';

    return $html;
}

add_action ( \'admin_enqueue_scripts\', \'custom_scripts_for_gallery\' );

function custom_scripts_for_gallery() {
    wp_enqueue_script ( \'jquery-ui-core\' );
    wp_enqueue_script ( \'jquery-ui-widget\' );
    wp_enqueue_script ( \'jquery-ui-sortable\' );

    if( ! did_action ( \'wp_enqueue_media\' ) )
        wp_enqueue_media ();

    wp_enqueue_script ( \'my_scripts\', \'... /my_scripts.js\', array ( \'jquery\', \'jquery-ui-sortable\' ) );
}

add_action ( \'admin_head\', \'my_custom_fonts\' ); // admin_head is a hook my_custom_fonts is a function we are adding it to the hook

function my_custom_fonts() {
    ?>
    <style>
        ul.custom_gallery_mtb.ui-sortable {
            display: flex;
        }

        ul.custom_gallery_mtb li {
            margin: 5px;
        }
        .shortcode_wrapper {
            max-width: 100%;
            font-size: 14px!important;
            font-weight: 600;
            display: inline-block;
            background: #fff;
            border: 1px solid #ccd0d4;
            border-width: 10px;
            padding: 1px 12px;
        }
    </style>
    <script>
        function in_array(el, arr) {
            for (var i in arr) {
                if (arr[i] == el)
                    return true;
            }
            return false;
        }
        jQuery(document).ready(function ($) {
            $(\'ul.custom_gallery_mtb\').sortable({
                items: \'li\',
                cursor: \'-webkit-grabbing\', /* mouse cursor */
                scrollSensitivity: 40,
                stop: function (event, ui) {
                    ui.item.removeAttr(\'style\');

                    var sort = new Array(), /* array of image IDs */
                            gallery = $(this); /* ul.custom_gallery_mtb */

                    /* each time after dragging we resort our array */
                    gallery.find(\'li\').each(function (index) {
                        sort.push($(this).attr(\'data-id\'));
                    });
                    /* add the array value to the hidden input field */
                    gallery.parent().next().val(sort.join());
                    /* console.log(sort); */
                }
            });
            /*
             * Multiple images uploader
             */
            $(\'.custom_upload_gallery_button\').click(function (e) {
                e.preventDefault();

                var button = $(this),
                        hiddenfield = button.prev(),
                        hiddenfieldvalue = hiddenfield.val().split(","), /* the array of added image IDs */
                        custom_uploader = wp.media({
                            title: \'Insert images\', /* popup title */
                            library: {type: \'image\'},
                            button: {text: \'Use these images\'}, /* "Insert" button text */
                            multiple: true
                        }).on(\'select\', function () {

                    var attachments = custom_uploader.state().get(\'selection\').map(function (a) {
                        a.toJSON();
                        return a;
                    }),
                            thesamepicture = false,
                            i;

                    /* loop through all the images */
                    for (i = 0; i < attachments.length; ++i) {

                        /* if you don\'t want the same images to be added multiple time */
                        if (!in_array(attachments[i].id, hiddenfieldvalue)) {

                            /* add HTML element with an image */
                            $(\'ul.custom_gallery_mtb\').append(\'<li data-id="\' + attachments[i].id + \'"><div><image src="\' + attachments[i].attributes.url + \'" height="100px" width="100px"/></div><a href="#" class="custom_gallery_remove">Remove Image</a></li>\');
                            /* add an image ID to the array of all images */
                            hiddenfieldvalue.push(attachments[i].id);
                        } else {
                            thesamepicture = true;
                        }
                    }
                    /* refresh sortable */
                    $("ul.custom_gallery_mtb").sortable("refresh");
                    /* add the IDs to the hidden field value */
                    hiddenfield.val(hiddenfieldvalue.join());
                    /* you can print a message for users if you want to let you know about the same images */
                    if (thesamepicture == true)
                        alert(\'The same images are not allowed.\');
                }).open();
            });

            /*
             * Remove certain images
             */
            $(\'body\').on(\'click\', \'.custom_gallery_remove\', function () {
                var id = $(this).parent().attr(\'data-id\'),
                        gallery = $(this).parent().parent(),
                        hiddenfield = gallery.parent().next(),
                        hiddenfieldvalue = hiddenfield.val().split(","),
                        i = hiddenfieldvalue.indexOf(id);

                $(this).parent().remove();

                /* remove certain array element */
                if (i != -1) {
                    hiddenfieldvalue.splice(i, 1);
                }

                /* add the IDs to the hidden field value */
                hiddenfield.val(hiddenfieldvalue.join());

                /* refresh sortable */
                gallery.sortable("refresh");

                return false;
            });
            /*
             * Selected item
             */
            $(\'body\').on(\'mousedown\', \'ul.custom_gallery_mtb li\', function () {
                var el = $(this);
                el.parent().find(\'li\').removeClass(\'custom-active\');
                el.addClass(\'custom-active\');
            });           
        });
    </script>
    <?php
}

add_filter ( \'manage_post_posts_columns\', \'smashing_filter_posts_columns\' );

function smashing_filter_posts_columns($columns) {
    $columns[ \'shortcode\' ] = __ ( \'Shortcode\' );
    return $columns;
}

add_action ( \'manage_post_posts_custom_column\', \'smashing_realestate_column\', 10, 2 );

function smashing_realestate_column($column, $post_id) {
    if( $column == \'shortcode\' ) {
        $value = get_post_meta ( $post_id, \'some_custom_gallery\' )[ 0 ];
        echo \'<div class="shortcode_wrapper">\';
        if( ! empty ( $value ) ) {
            echo\'[custom-post-gallery post_id="\' . $post_id . \'"]\';
        } else {
            echo\'No Images\';
        }
        echo \'</div>\';
    }
}

add_shortcode ( \'custom-post-gallery\', \'wpdocs_footag_func\' );

function wpdocs_footag_func($atts) {
    $value  = get_post_meta ( $atts[ \'post_id\' ], \'some_custom_gallery\' );
    $images = get_posts ( array (
        \'post_type\'      => \'attachment\',
        \'orderby\'        => \'post__in\',
        \'order\'          => \'ASC\',
        \'post__in\'       => explode ( \',\', $value[ 0 ] ),
        \'numberposts\'    => -1,
        \'post_mime_type\' => \'image\'
            ) );
    ?>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
    <div class="slider">
        <?php if( ! empty ( $images ) ) { ?>
            <?php
            foreach ( $images as $image ) {
                $image_src = wp_get_attachment_image_src ( $image->ID, array ( 80, 80 ) );
                ?>
                <img width="100px" height="100px" src="<?php echo $image_src[ 0 ]; ?>" />
            <?php } ?>
        <?php } ?>
    </div>
    <script>
        jQuery(document).ready(function ($) {
            $(\'.slider\').slick();
        });
    </script>
    <?php
}

相关推荐

Wordpress Vue Js Shortcodes

目前,我正在与Vue一起开发wordpress网站。js和wordpress REST API,找不到使用wordpress ShortCodeEx的解决方案:Contact Form 7 我一直在尝试这个例子,但它似乎对我不起作用Vue.js + AJAX Shortcode有没有人有过类似的问题?编辑:For ExampleIn regular wordpress我可以用这种方式使用联系人表单插件 <section class=\"container section__form display-