kyosifov/carbon-fields-urlpicker

Carbon Fields 扩展,增加 URL 选择器字段类型。

安装: 654

依赖者: 0

建议者: 0

安全: 0

星标: 2

关注者: 0

分支: 18

语言:JavaScript

1.0.3 2019-01-30 20:27 UTC

This package is auto-updated.

Last update: 2024-09-29 04:43:31 UTC


README

(这是 Carbon Fields 插件的扩展,链接:Carbon Fields)

为 Carbon Fields 添加 urlpicker 字段类型。使用 composer 安装

composer require kyosfiov/carbon-fields-urlpicker

(首先,确保你在 composer.json 中设置了 "minimum-stability": "dev")

或者通过安装 WP 插件(尽管推荐使用 composer;作为插件安装可能会抛出错误)。

返回值

该字段将返回一个包含以下值的关联数组

url: the actual URL
anchor: the text anchor (might be blank)
blank: wether the link should open in a new window or not

示例

注册字段

这需要在你的 functions.php 中像其他 Carbon Fields 字段一样进行。唯一的区别是类型是 urlpicker

use Carbon_Fields\Container;
use Carbon_Fields\Field;

add_action( 'carbon_fields_register_fields', 'crb_url_picker_test' );

function crb_url_picker_test() {
  Container::make( 'post_meta', 'URL Picker Test' )
    ->add_fields( array(
      Field::make( 'urlpicker', 'crb_my_link', 'URL Picker Test' )
      	->set_help_text( "This is a test of the URL picker." )
    ));
}

使用字段值

<?php $my_link = carbon_get_the_post_meta( 'crb_my_link' ); ?>
<a href="<?php $my_link[url] ?>"<?php ( $my_link[blank] ? ' target="_blank"' : '') ?>><?php $my_link[anchor] ?></a>

请注意,anchor 字段将返回 01,具体取决于“在新标签页中打开链接”旁边的复选框是否勾选。

Gutenberg 集成

use Carbon_Fields\Block;

Block::make( __( 'My Shiny Gutenberg Block' ) )
    ->add_fields( array(
        Field::make( 'urlpicker', 'url_data', __( 'Link' ) ),
        Field::make( 'image', 'image', __( 'Block Image' ) ),
        Field::make( 'rich_text', 'content', __( 'Block Content' ) ),
    ) )
    ->set_render_callback( function ( $block ) {
        ?>

        <div class="block">
            <div class="block__heading">
            	<?php
            	$link_data = $block['url_data'];
            	?>
            	<a href="<?php $link_data['url'] ?>"<?php ( $link_data['blank'] ? ' target="_blank"' : '') ?>><?php $link_data['anchor'] ?></a>
            </div><!-- /.block__heading -->

            <div class="block__image">
                <?php echo wp_get_attachment_image( $block['image'], 'full' ); ?>
            </div><!-- /.block__image -->

            <div class="block__content">
                <?php echo apply_filters( 'the_content', $block['content'] ); ?>
            </div><!-- /.block__content -->
        </div><!-- /.block -->

        <?php
    } );