Thêm tùy chọn căn chỉnh cho hình ảnh


11

Một sự kiện hiếm hoi - Tôi muốn làm một cái gì đó trong WordPress nhưng không biết làm thế nào để tìm kiếm nó và tìm kiếm không có nghĩa đen.

Khi bạn chèn hình ảnh vào bài đăng, bạn sẽ có các tùy chọn căn chỉnh: 'none', 'left', 'right', 'centre'. Những kết quả này dẫn đến hình ảnh được chèn bằng một lớp CSS liên quan đến căn chỉnh, như 'alignleft', 'alignright' hoặc 'aligncenter'.

Tuyệt quá.

Điều gì sẽ xảy ra nếu chủ đề của tôi phức tạp hơn một chút và tôi muốn thêm một vài tùy chọn ở đây, giống như các tùy chọn cốt lõi, sẽ chỉ thêm một lớp CSS mới vào các hình ảnh được chèn? Ví dụ: tùy chọn 'lề phải' mà tôi có thể tạo kiểu với một số CSS ưa thích để có được một số bố cục phức tạp hơn?

Bất kỳ con trỏ về nơi tôi có thể bắt đầu?


Làm thế nào để bạn xác định / chọn bố trí tùy chỉnh / phức tạp?
Chip Bennett

Tôi đã cập nhật mã lên WordPress 4.1.0 wordpress.stackexchange.com/questions/172849/NH
Jack Ottermans

Câu trả lời:


2

Tôi đồng ý với david-binda - câu hỏi tuyệt vời! Tôi đã gặp phải vấn đề này trong một số trường hợp và đưa ra một giải pháp hoạt động khá tốt. Mặc dù tôi thích ý tưởng thêm một shortcode để chèn hình ảnh với các lớp theo đề xuất của pavlos-bizimis Tôi không nghĩ rằng nó thực sự giải quyết vấn đề một cách tao nhã như việc thêm các tùy chọn vào cửa sổ bật lên chỉnh sửa hình ảnh (ví dụ bạn có thể phải bọc hình ảnh trong shortcode của bạn trừ khi bạn muốn nhập ID hình ảnh theo cách thủ công). Ngoài ra, đối với một số khách hàng của tôi, ngay cả một shortcode cũng quá phức tạp (trong trường hợp đó bạn có thể liên kết nó với nút TinyMCE ngoài khóa học).

Dù sao, không cần phải quảng cáo thêm - đây là năm xu của tôi. Tôi sử dụng giải pháp này trong plugin trình chiếu cung cấp cho tôi các tùy chọn để bao gồm / loại trừ hình ảnh khỏi trình chiếu và đặt màu nền cho lớp phủ hiển thị nội dung của một số trường meta hình ảnh. Về cơ bản, nó móc vào attachment_fields_to_editattachment_fields_to_saveđể thêm các trường đầu vào và lưu dữ liệu biểu mẫu tương ứng. Dữ liệu này sẽ có sẵn dưới dạng meta bài đăng tiêu chuẩn cho bài đăng đính kèm (tức là hình ảnh bạn đang chỉnh sửa). Điều này thật tuyệt vì nó dễ dàng lấy lại get_post_meta()như bình thường. Và bạn cũng nên thêm một bộ lọc vào wp_get_attachment_image_attributeshoặc image_send_to_editorsẽ cho phép bạn tự động thêm lớp thích hợp mỗi khi hình ảnh được xuất ra.

Tôi đã sửa đổi mã một chút để dễ đọc, vì vậy một số phần có thể không đầy đủ / sai sót.

/**
 * Adds a form field for excluding images from slideshow
 *
 * @param array $form_fields Array of form fields
 * @param object $post The post to show
 * @return array Array of form fields
 * @author Simon Fransson
 **/
function hs_attachment_fields_to_edit($form_fields, $post = null)
{

    $val = (boolean)get_post_meta($post->ID, SLIDESHOW_EXCLUDE_IMAGE_KEY, true);
    $id = SLIDESHOW_EXCLUDE_IMAGE_KEY . "-" . $post->ID;
    $markup = sprintf('<label for="%s"><input type="checkbox" class="checkbox" id="%s" name="attachments[%s][%s]" value="true" %s /> %s</label>', $id, $id, $post->ID, SLIDESHOW_EXCLUDE_IMAGE_KEY, checked($val, true, false), __('Exclude from slideshow', 'slideshow'));

    $form_field = array(
        'label' => __('Slideshow', 'slideshow'),
        'input' => 'html',
        'html' => $markup,
        'value' => $val,
        'helps' => __('Excludes the image from slideshows.', 'slideshow'),
    );

    $form_fields[SLIDESHOW_EXCLUDE_IMAGE_KEY] = $form_field; // See update notice below code block!

    return $form_fields;
}
add_filter('attachment_fields_to_edit', 'hs_attachment_fields_to_edit', 10, 2);



/**
 * Save the images exclude status meta value when saving attachment data
 *
 * @param object $post Post object
 * @param  array $attachment Field values
 * @return object Post object
 * @author Simon Fransson
 **/
function hs_attachment_fields_to_save($post, $attachment = null)
{
    update_post_meta($post['ID'], SLIDESHOW_EXCLUDE_IMAGE_KEY, intval(isset($attachment[SLIDESHOW_EXCLUDE_IMAGE_KEY])));

    return $post;
}
add_filter('attachment_fields_to_save', 'hs_attachment_fields_to_save', 10, 2);


/**
 * Generate metadata for newly uploaded attachment.
 * This is here simply because we are dealing with a boolean,
 * which means that for SQL related reasons a value NEEDS to
 * exist even when noting has been specified in the options 
 *
 * @param  array $metadata Array of meta data
 * @param int $attachment_id ID of attachment post
 * @return array Array of meta data
 * @author Simon Fransson
 **/
function hs_generate_attachment_metadata($metadata, $attachment_id = null)
{
    $exclude = intval(get_post_meta($attachment_id, SLIDESHOW_EXCLUDE_IMAGE_KEY, true));
    update_post_meta($attachment_id, SLIDESHOW_EXCLUDE_IMAGE_KEY, $exclude);

    return $metadata;
}
add_filter('wp_generate_attachment_metadata', 'hs_generate_attachment_metadata', 10, 2);

CẬP NHẬT : Tôi vừa sao chép mã này để sử dụng nó như bản tóm tắt trong một dự án tôi đang làm việc. Như bạn có thể biết khi nhìn vào mã tôi muốn lưu trữ các khóa meta bài đăng của mình trong các hằng số xác định. Khi tôi làm điều này, tôi luôn luôn chuẩn bị giá trị _để ngăn nó hiển thị trong trình chỉnh sửa trường meta, nhưng thực tế này có thể gây ra một số vấn đề với attachment_fields_to_save. Các khóa trong $form_fieldsmảng không thể bắt đầu bằng_ , vì vậy hãy cẩn thận sử dụng các khóa khác nhau cho các giá trị mảng và meta hoặc cắt bất kỳ dấu gạch dưới nào khi xử lý các trường đính kèm. Vì SLIDESHOW_EXCLUDE_IMAGE_KEYthậm chí không được định nghĩa trong ví dụ của tôi nên điều này có lẽ không phải là vấn đề lớn khi sao chép mã, nhưng tôi nghĩ dù sao tôi cũng sẽ đề cập đến nó. Tôi phải mất một thời gian để tìm ra điều này (và lần thứ hai, tại đó).


Đây có vẻ như là giải pháp tốt nhất được đề xuất. Tôi sẽ thử và cho bạn biết nó diễn ra như thế nào. Cảm ơn rất nhiều vì đã chia sẻ mã của bạn với tôi.
NatalieMac

1

Câu hỏi hay. Và câu hỏi này đã có giải pháp. Có thể đoạn mã dưới đây quá dài, nhưng không thể ngắn hơn được nữa. Vấn đề là, bạn có thể xóa hook wp_footer và wp_admin_footer cho hàm wp_print_media_temsheet và thay thế nó bằng chức năng wp_print_media_temsheet của riêng bạn bằng các tùy chọn tùy chỉnh. Chỉ cần đặt mã bên dưới vào hàm.php của bạn sẽ ghi đè hàm orginial và cho phép bạn sửa đổi các lớp sau dòng nhận xét HTML <! - CÀI ĐẶT LỚP HỌC CỦA BẠN TẠI ĐÂY -> Các lớp được chèn vào mã ngắn thư viện theo cách này:

giá trị được đặt là MyClass1 tạo ra alignMyClass1.

remove_action( 'wp_footer', 'wp_print_media_templates' );
remove_action( 'admin_footer', 'wp_print_media_templates' );
add_action( 'admin_footer', 'my_wp_print_media_templates' );
add_action( 'wp_footer', 'my_wp_print_media_templates' );

function my_wp_print_media_templates() {
global $is_IE;
$class = 'media-modal wp-core-ui';
if ( $is_IE && strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 7') !== false )
    $class .= ' ie7';
?>
<script type="text/html" id="tmpl-media-frame">
    <div class="media-frame-menu"></div>
    <div class="media-frame-title"></div>
    <div class="media-frame-router"></div>
    <div class="media-frame-content"></div>
    <div class="media-frame-toolbar"></div>
    <div class="media-frame-uploader"></div>
</script>

<script type="text/html" id="tmpl-media-modal">
    <div class="<?php echo $class; ?>">
        <a class="media-modal-close" href="#" title="<?php esc_attr_e('Close'); ?>"><span class="media-modal-icon"></span></a>
        <div class="media-modal-content"></div>
    </div>
    <div class="media-modal-backdrop"></div>
</script>

<script type="text/html" id="tmpl-uploader-window">
    <div class="uploader-window-content">
        <h3><?php _e( 'Drop files to upload' ); ?></h3>
    </div>
</script>

<script type="text/html" id="tmpl-uploader-inline">
    <# var messageClass = data.message ? 'has-upload-message' : 'no-upload-message'; #>
    <div class="uploader-inline-content {{ messageClass }}">
    <# if ( data.message ) { #>
        <h3 class="upload-message">{{ data.message }}</h3>
    <# } #>
    <?php if ( ! _device_can_upload() ) : ?>
        <h3 class="upload-instructions"><?php _e('The web browser on your device cannot be used to upload files. You may be able to use the <a href="http://wordpress.org/extend/mobile/">native app for your device</a> instead.'); ?></h3>
    <?php elseif ( is_multisite() && ! is_upload_space_available() ) : ?>
        <h3 class="upload-instructions"><?php _e( 'Upload Limit Exceeded' ); ?></h3>
        <?php do_action( 'upload_ui_over_quota' ); ?>

    <?php else : ?>
        <div class="upload-ui">
            <h3 class="upload-instructions drop-instructions"><?php _e( 'Drop files anywhere to upload' ); ?></h3>
            <a href="#" class="browser button button-hero"><?php _e( 'Select Files' ); ?></a>
        </div>

        <div class="upload-inline-status"></div>

        <div class="post-upload-ui">
            <?php
            do_action( 'pre-upload-ui' );
            do_action( 'pre-plupload-upload-ui' );

            if ( 10 === remove_action( 'post-plupload-upload-ui', 'media_upload_flash_bypass' ) ) {
                do_action( 'post-plupload-upload-ui' );
                add_action( 'post-plupload-upload-ui', 'media_upload_flash_bypass' );
            } else {
                do_action( 'post-plupload-upload-ui' );
            }

            $upload_size_unit = $max_upload_size = wp_max_upload_size();
            $byte_sizes = array( 'KB', 'MB', 'GB' );

            for ( $u = -1; $upload_size_unit > 1024 && $u < count( $byte_sizes ) - 1; $u++ ) {
                $upload_size_unit /= 1024;
            }

            if ( $u < 0 ) {
                $upload_size_unit = 0;
                $u = 0;
            } else {
                $upload_size_unit = (int) $upload_size_unit;
            }

            ?>

            <p class="max-upload-size"><?php
                printf( __( 'Maximum upload file size: %d%s.' ), esc_html($upload_size_unit), esc_html($byte_sizes[$u]) );
            ?></p>

            <?php if ( ( $GLOBALS['is_IE'] || $GLOBALS['is_opera']) && $max_upload_size > 100 * 1024 * 1024 ) :
                $browser_uploader = admin_url( 'media-new.php?browser-uploader&post_id=' ) . '{{ data.postId }}';
                ?>
                <p class="big-file-warning"><?php printf( __( 'Your browser has some limitations uploading large files with the multi-file uploader. Please use the <a href="%1$s" target="%2$s">browser uploader</a> for files over 100MB.' ),
                    $browser_uploader, '_blank' ); ?></p>
            <?php endif; ?>

            <?php do_action( 'post-upload-ui' ); ?>
        </div>
    <?php endif; ?>
    </div>
</script>

<script type="text/html" id="tmpl-uploader-status">
    <h3><?php _e( 'Uploading' ); ?></h3>
    <a class="upload-dismiss-errors" href="#"><?php _e('Dismiss Errors'); ?></a>

    <div class="media-progress-bar"><div></div></div>
    <div class="upload-details">
        <span class="upload-count">
            <span class="upload-index"></span> / <span class="upload-total"></span>
        </span>
        <span class="upload-detail-separator">&ndash;</span>
        <span class="upload-filename"></span>
    </div>
    <div class="upload-errors"></div>
</script>

<script type="text/html" id="tmpl-uploader-status-error">
    <span class="upload-error-label"><?php _e('Error'); ?></span>
    <span class="upload-error-filename">{{{ data.filename }}}</span>
    <span class="upload-error-message">{{ data.message }}</span>
</script>

<script type="text/html" id="tmpl-attachment">
    <div class="attachment-preview type-{{ data.type }} subtype-{{ data.subtype }} {{ data.orientation }}">
        <# if ( data.uploading ) { #>
            <div class="media-progress-bar"><div></div></div>
        <# } else if ( 'image' === data.type ) { #>
            <div class="thumbnail">
                <div class="centered">
                    <img src="{{ data.size.url }}" draggable="false" />
                </div>
            </div>
        <# } else { #>
            <img src="{{ data.icon }}" class="icon" draggable="false" />
            <div class="filename">
                <div>{{ data.filename }}</div>
            </div>
        <# } #>

        <# if ( data.buttons.close ) { #>
            <a class="close media-modal-icon" href="#" title="<?php _e('Remove'); ?>"></a>
        <# } #>

        <# if ( data.buttons.check ) { #>
            <a class="check" href="#" title="<?php _e('Deselect'); ?>"><div class="media-modal-icon"></div></a>
        <# } #>
    </div>
    <#
    var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly';
    if ( data.describe ) { #>
        <# if ( 'image' === data.type ) { #>
            <input type="text" value="{{ data.caption }}" class="describe" data-setting="caption"
                placeholder="<?php esc_attr_e('Caption this image&hellip;'); ?>" {{ maybeReadOnly }} />
        <# } else { #>
            <input type="text" value="{{ data.title }}" class="describe" data-setting="title"
                <# if ( 'video' === data.type ) { #>
                    placeholder="<?php esc_attr_e('Describe this video&hellip;'); ?>"
                <# } else if ( 'audio' === data.type ) { #>
                    placeholder="<?php esc_attr_e('Describe this audio file&hellip;'); ?>"
                <# } else { #>
                    placeholder="<?php esc_attr_e('Describe this media file&hellip;'); ?>"
                <# } #> {{ maybeReadOnly }} />
        <# } #>
    <# } #>
</script>

<script type="text/html" id="tmpl-attachment-details">
    <h3>
        <?php _e('Attachment Details'); ?>

        <span class="settings-save-status">
            <span class="spinner"></span>
            <span class="saved"><?php esc_html_e('Saved.'); ?></span>
        </span>
    </h3>
    <div class="attachment-info">
        <div class="thumbnail">
            <# if ( data.uploading ) { #>
                <div class="media-progress-bar"><div></div></div>
            <# } else if ( 'image' === data.type ) { #>
                <img src="{{ data.size.url }}" draggable="false" />
            <# } else { #>
                <img src="{{ data.icon }}" class="icon" draggable="false" />
            <# } #>
        </div>
        <div class="details">
            <div class="filename">{{ data.filename }}</div>
            <div class="uploaded">{{ data.dateFormatted }}</div>

            <# if ( 'image' === data.type && ! data.uploading ) { #>
                <# if ( data.width && data.height ) { #>
                    <div class="dimensions">{{ data.width }} &times; {{ data.height }}</div>
                <# } #>

                <# if ( data.can.save ) { #>
                    <a class="edit-attachment" href="{{ data.editLink }}&amp;image-editor" target="_blank"><?php _e( 'Edit Image' ); ?></a>
                    <a class="refresh-attachment" href="#"><?php _e( 'Refresh' ); ?></a>
                <# } #>
            <# } #>

            <# if ( ! data.uploading && data.can.remove ) { #>
                <a class="delete-attachment" href="#"><?php _e( 'Delete Permanently' ); ?></a>
            <# } #>

            <div class="compat-meta">
                <# if ( data.compat && data.compat.meta ) { #>
                    {{{ data.compat.meta }}}
                <# } #>
            </div>
        </div>
    </div>

    <# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
        <label class="setting" data-setting="title">
            <span><?php _e('Title'); ?></span>
            <input type="text" value="{{ data.title }}" {{ maybeReadOnly }} />
        </label>
        <label class="setting" data-setting="caption">
            <span><?php _e('Caption'); ?></span>
            <textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea>
        </label>
    <# if ( 'image' === data.type ) { #>
        <label class="setting" data-setting="alt">
            <span><?php _e('Alt Text'); ?></span>
            <input type="text" value="{{ data.alt }}" {{ maybeReadOnly }} />
        </label>
    <# } #>
        <label class="setting" data-setting="description">
            <span><?php _e('Description'); ?></span>
            <textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
        </label>
</script>

<script type="text/html" id="tmpl-media-selection">
    <div class="selection-info">
        <span class="count"></span>
        <# if ( data.editable ) { #>
            <a class="edit-selection" href="#"><?php _e('Edit'); ?></a>
        <# } #>
        <# if ( data.clearable ) { #>
            <a class="clear-selection" href="#"><?php _e('Clear'); ?></a>
        <# } #>
    </div>
    <div class="selection-view"></div>
</script>

<script type="text/html" id="tmpl-attachment-display-settings">
    <h3><?php _e('Attachment Display Settings'); ?></h3>

    <# if ( 'image' === data.type ) { #>
        <label class="setting">
            <span><?php _e('Alignment'); ?></span>
            <select class="alignment"
                data-setting="align"
                <# if ( data.userSettings ) { #>
                    data-user-setting="align"
                <# } #>>

                <option value="left">
                    <?php esc_attr_e('Left'); ?>
                </option>
                <option value="center">
                    <?php esc_attr_e('Center'); ?>
                </option>
                <option value="right">
                    <?php esc_attr_e('Right'); ?>
                </option>
                <option value="none" selected>
                    <?php esc_attr_e('None'); ?>
                </option>
                <!-- SETUP YOUR CLASSES HERE -->
                <option value="MyClass1"> <!-- set value produces class alignMyClass1 -->
                    <?php esc_attr_e('My class 1'); ?> <!-- label for your Class -->
                </option>
            </select>
        </label>
    <# } #>

    <div class="setting">
        <label>
            <span><?php _e('Link To'); ?></span>
            <select class="link-to"
                data-setting="link"
                <# if ( data.userSettings ) { #>
                    data-user-setting="urlbutton"
                <# } #>>

                <option value="custom">
                    <?php esc_attr_e('Custom URL'); ?>
                </option>
                <option value="file" selected>
                    <?php esc_attr_e('Media File'); ?>
                </option>
                <option value="post">
                    <?php esc_attr_e('Attachment Page'); ?>
                </option>
                <option value="none">
                    <?php esc_attr_e('None'); ?>
                </option>                   
            </select>
        </label>
        <input type="text" class="link-to-custom" data-setting="linkUrl" />
    </div>

    <# if ( 'undefined' !== typeof data.sizes ) { #>
        <label class="setting">
            <span><?php _e('Size'); ?></span>
            <select class="size" name="size"
                data-setting="size"
                <# if ( data.userSettings ) { #>
                    data-user-setting="imgsize"
                <# } #>>
                <?php

                $sizes = apply_filters( 'image_size_names_choose', array(
                    'thumbnail' => __('Thumbnail'),
                    'medium'    => __('Medium'),
                    'large'     => __('Large'),
                    'full'      => __('Full Size'),
                ) );

                foreach ( $sizes as $value => $name ) : ?>
                    <#
                    var size = data.sizes['<?php echo esc_js( $value ); ?>'];
                    if ( size ) { #>
                        <option value="<?php echo esc_attr( $value ); ?>" <?php selected( $value, 'full' ); ?>>
                            <?php echo esc_html( $name ); ?> &ndash; {{ size.width }} &times; {{ size.height }}
                        </option>
                    <# } #>
                <?php endforeach; ?>
            </select>
        </label>
    <# } #>
</script>

<script type="text/html" id="tmpl-gallery-settings">
    <h3><?php _e('Gallery Settings'); ?></h3>

    <label class="setting">
        <span><?php _e('Link To'); ?></span>
        <select class="link-to"
            data-setting="link"
            <# if ( data.userSettings ) { #>
                data-user-setting="urlbutton"
            <# } #>>

            <option value="file" selected>
                <?php esc_attr_e('Media File'); ?>
            </option>
            <option value="post">
                <?php esc_attr_e('Attachment Page'); ?>
            </option>
        </select>
    </label>

    <label class="setting">
        <span><?php _e('Columns'); ?></span>
        <select class="columns" name="columns"
            data-setting="columns">
            <?php for ( $i = 1; $i <= 9; $i++ ) : ?>
                <option value="<?php echo esc_attr( $i ); ?>" <?php selected( $i, 3 ); ?>>
                    <?php echo esc_html( $i ); ?>
                </option>
            <?php endfor; ?>
        </select>
    </label>

    <label class="setting">
        <span><?php _e( 'Random Order' ); ?></span>
        <input type="checkbox" data-setting="_orderbyRandom" />
    </label>
</script>

<script type="text/html" id="tmpl-embed-link-settings">
    <label class="setting">
        <span><?php _e('Title'); ?></span>
        <input type="text" class="alignment" data-setting="title" />
    </label>
</script>

<script type="text/html" id="tmpl-embed-image-settings">
    <div class="thumbnail">
        <img src="{{ data.model.url }}" draggable="false" />
    </div>

    <?php if ( ! apply_filters( 'disable_captions', '' ) ) : ?>
        <label class="setting caption">
            <span><?php _e('Caption'); ?></span>
            <textarea data-setting="caption" />
        </label>
    <?php endif; ?>

    <label class="setting alt-text">
        <span><?php _e('Alt Text'); ?></span>
        <input type="text" data-setting="alt" />
    </label>

    <div class="setting align">
        <span><?php _e('Align'); ?></span>
        <div class="button-group button-large" data-setting="align">
            <button class="button" value="left">
                <?php esc_attr_e('Left'); ?>
            </button>
            <button class="button" value="center">
                <?php esc_attr_e('Center'); ?>
            </button>
            <button class="button" value="right">
                <?php esc_attr_e('Right'); ?>
            </button>
            <button class="button active" value="none">
                <?php esc_attr_e('None'); ?>
            </button>
        </div>
    </div>

    <div class="setting link-to">
        <span><?php _e('Link To'); ?></span>
        <div class="button-group button-large" data-setting="link">
            <button class="button" value="file">
                <?php esc_attr_e('Image URL'); ?>
            </button>
            <button class="button" value="custom">
                <?php esc_attr_e('Custom URL'); ?>
            </button>
            <button class="button active" value="none">
                <?php esc_attr_e('None'); ?>
            </button>
        </div>
        <input type="text" class="link-to-custom" data-setting="linkUrl" />
    </div>
</script>

<script type="text/html" id="tmpl-attachments-css">
    <style type="text/css" id="{{ data.id }}-css">
        #{{ data.id }} {
            padding: 0 {{ data.gutter }}px;
        }

        #{{ data.id }} .attachment {
            margin: {{ data.gutter }}px;
            width: {{ data.edge }}px;
        }

        #{{ data.id }} .attachment-preview,
        #{{ data.id }} .attachment-preview .thumbnail {
            width: {{ data.edge }}px;
            height: {{ data.edge }}px;
        }

        #{{ data.id }} .portrait .thumbnail img {
            max-width: {{ data.edge }}px;
            height: auto;
        }

        #{{ data.id }} .landscape .thumbnail img {
            width: auto;
            max-height: {{ data.edge }}px;
        }
    </style>
</script>
<?php

do_action( 'print_media_templates' );
}

Nếu bạn muốn đặt các lớp không có tiền tố "căn chỉnh", bạn sẽ phải sửa đổi javascript chèn shortcode vào văn bản nội dung của bài đăng và nó có thể quá phức tạp so với việc đổi tên các lớp của bạn trong CSS. Enyoj!


3
Tôi lo lắng rằng việc thay thế hoàn toàn một chức năng cốt lõi bằng phiên bản của riêng tôi sẽ không thể duy trì được trong tương lai. Điều gì xảy ra nếu có một số loại đại tu hoặc viết lại chức năng cốt lõi?
NatalieMac

Bạn nói đúng, và tôi hy vọng sẽ có - với các bộ lọc và móc hành động. Nhưng cho đến nay, tôi sẽ không sợ vì khách hàng của tôi có thể liên lạc với tôi và tôi sẽ cung cấp cách khắc phục nhanh chóng.
david.binda 2/213

Có, nhưng nếu một plugin khác đang tùy chỉnh mã này theo cùng một cách thì sao? Cách bạn mô tả chỉ có thể được thực hiện bởi một plugin, không có xung đột.
NoBugs

Bất kỳ ý tưởng nếu điều này bây giờ có thể có trong các phiên bản hiện đại của WordPress? Đã cố gắng tìm ra cách thêm tùy chọn căn chỉnh "toàn chiều rộng" và như @NirthieMac đã nói, tôi không muốn ghi đè lên toàn bộ chức năng.
JacobTheDev

0

Có lẽ bạn nên tạo một shortcode để chèn hình ảnh với các thuộc tính lớp. Tôi đã nhìn thấy điều này trong rất nhiều chủ đề thương mại.


2
Chi tiết hơn sẽ làm cho điều này một câu trả lời tốt hơn .. có lẽ là một ví dụ ngắn gọn.
s_ha_dum

Chủ đề không nên thêm mã ngắn post_content. Khi người dùng chuyển Chủ đề, các mã ngắn đó sẽ không còn được phân tích cú pháp nữa và sẽ dẫn đến đầu ra nội dung bài đăng bị hỏng / ngoài ý muốn.
Chip Bennett

Đồng ý với Chip - Tôi không muốn đi theo con đường shortcode bởi vì tất cả chúng sẽ bị phá vỡ nếu anh ấy thay đổi chủ đề. Ít nhất nếu tôi chỉ thêm một lớp CSS vào hình ảnh, điều tồi tệ nhất có thể xảy ra là nó sẽ bị bỏ qua nếu anh ta thay đổi chủ đề.
NatalieMac

-3

Bạn có thể sử dụng ID hình ảnh duy nhất để định kiểu từng hình ảnh cụ thể.


1
Tôi không chắc chắn điều này trả lời câu hỏi. @NirthieMac dường như không tìm cách tạo kiểu riêng cho từng hình ảnh, việc này rất tốn công sức, nhưng để thêm nhiều lớp hơn vào đánh dấu.
s_ha_dum

Đúng, tôi có thể, nhưng điều này không linh hoạt. Tôi cần một cái gì đó khách hàng có thể dễ dàng tự cập nhật.
NatalieMac
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.