一般来说，由于WordPress最大的卖点是它的内容管理，客户最想要的是他们可以编辑的网站，而不需要任何代码，也不需要任何可能破坏某些内容的机会，因此将html放在无序/有序列表之外的文本编辑器中是一种不好的做法，并挫败了让内容易于管理的目的。

以您提供的图像为例进行判断，这些项目符号列表似乎与其余内容不一致，因此您需要html才能获得该布局。为了使html不在文本编辑器中，并为您和您的客户保持尽可能干净的编辑，我建议停止依赖页面。php并创建自己的page template.

在模板中，您可以布局所需的任何html，并使用循环在主文本编辑器中调用任何内容。无需使用插件，您可以利用自定义字段或插件Magic Field 在那里他们可以编辑项目符号列表。将模板分配给每个页面，调用页面内容和来自某个字段的列表将仅获取该特定页面的内容。而且，它还可以将文本编辑器中的任何复杂HTML保留在围绕循环和功能的模板中，从而消除文本编辑器中的任何复杂HTML。

如果你真的，真的不想让客户端写任何html，甚至uls/lis，如果你使用的是魔术字段和你自己的模板，你可以创建一个可以在WP Admin上复制的字段，并在模板中使用foreach with PHP。类似这样：

<?php if ( get_field(\'list-item\') == TRUE ) : ?>
<!--This checks to see if your client is writing anything in this field, if not, your html won\'t show on the template at all, it\'ll be cleaner this way -->
<ul>
<?php $listItems = get_field(\'list-item\');
  foreach($listItems as $listItem) {
    echo "<li>" . $listItem . "</li>";
  } ?>
</ul>
<?php endif; ?>

只需单击WordPress可视化编辑器中的“列表图标”即可创建列表，然后在“代码视图”中用<div style="float: right"> ... </div>

可能最方便用户的方法是创建一个新的可视化编辑器按钮，该按钮可以创建<div> 并为您列出。用户只需添加每个列表项。。。

在评论中，对于复杂的解决方案，您几乎没有什么好主意，但如果您的客户机正在移动一个静态站点，并且不会经常更改列表，那么您应该考虑简单地使用自定义css类将列表包装在div/aside中。

添加更复杂的解决方案不一定是好事。尤其是当列表包含指向网站内容的相对链接时。通过简单的搁置+css，您可以在未来轻松地将内容移动到新站点/主题，而无需插件/附加代码等。快捷代码/元数据库等。打破了这种内容/机械分离，因此应尽可能避免IMHO。

<aside class="gs-pull-right">
    <ul>
        <li>...</li>
        <li>...</li>
        <li>...</li>
    </ul>
</aside>

<style>
.gs-pull-right {
    border: 1px solid black;
    float:right;
    width: 300px;
}
</style>

如前所述，这是一个可以使用metabox向客户提供的解决方案。您可以将其复制/粘贴到functions.php :

add_action( \'add_meta_boxes\', \'bullet1545_add_custom_box\' );

add_action( \'save_post\', \'bullet1545_save_custom_meta_box\' );

function bullet1545_add_custom_box( $post ) {

    add_meta_box(
        \'Bullet Meta Box\', // ID, should be a string
        \'Side List\', // Meta Box Title
        \'bullet1545_custom_meta_box_content\', // Your call back function, this is where your form field will go
        \'post\', // The post type you want this to show up on, can be post, page, or custom post type
        \'normal\', // The placement of your meta box, can be normal or side
        \'high\' // The priority in which this will be displayed
    );

}

function bullet1545_save_custom_meta_box(){

    global $post;

    // Get our form field
    if( $_POST ) :

        $bullet1545_custom_meta = esc_attr( $_POST[\'bullet1545-custom-meta-box\'] );

        // Update post meta
        update_post_meta($post->ID, \'_bullet1545_custom_meta\', $bullet1545_custom_meta);

    endif;

}

function bullet1545_custom_meta_box_content( $post ) {

    // Get post meta value using the key from our save function in the second paramater.
    $bullet1545_custom_meta = get_post_meta($post->ID, \'_bullet1545_custom_meta\', true);

    echo \'<label>Custom Meta Box:</label>
    \';

    echo \'<textarea name="bullet1545-custom-meta-box">\'.$bullet1545_custom_meta.\'</textarea>\';

}

现在在您的页面中显示前端。php，您可以使用该代码：

<?php 

$myBullets = get_post_meta(get_the_ID(), "_bullet1545_custom_meta", true); // retrieve the content of your metabox

echo \'<ul>\';
$textareaData = \'<li>\'.str_replace(array("\\r","\\n\\n","\\n"),array(\'\',"\\n","</li>\\n<li>"),trim($myBullets,"\\n\\r")).\'</li>\'; // this line converts all the lines that are inside your textarea in li lines, removing empty lines
echo \'</ul>\';

?>

我希望它尽可能清楚。使用此解决方案，您不必维护插件，网站所有者也不必使用li标签。

通过启用编辑器样式，这相当简单。它向编辑器中添加了一个样式下拉列表，您可以轻松地将类名添加到特定元素中。

将以下内容添加到函数中。php：

// pushes the style select dropdown into the list of
// TinyMCE controls on the 2nd line of the toolbar
add_filter( \'mce_buttons_2\', \'custom_mce_buttons_2\' );
function custom_mce_buttons_2( $buttons ) {
    array_unshift( $buttons, \'styleselect\' );
    return $buttons;
}

// this adds items to the styles dropdown we just added.
// The options in the array control how it works, you can
// add styles that wrap content in a block or inline element
// with a specific class, you target specific elements only
// and more
add_filter( \'tiny_mce_before_init\', \'custom_mce_before_init\' );
function custom_mce_before_init( $settings ) {

    // array of items for styleselect dropdown
    $style_formats = array(
        array(
        \'title\' => \'Bulleted list\',
        \'selector\' => \'ul\',
        \'classes\' => \'alignright big-bulletted-list\'
        )
    );

    $settings[\'style_formats\'] = json_encode( $style_formats );

    return $settings;
}

为了让客户端看到所做的更改，您可以添加一个编辑器样式表。再次在您的功能中。php使用：

add_editor_style(\'editor.css\');

.alignright { float: right; }
.big-bulleted-list { padding: 20px; list-style: none; }
.big-bulleted-list li { padding-left: 20px; background: url(bullet.png) no-repeat left center; }

您可以在文本编辑器中使用div包装项目符号列表，然后相应地设置div的样式。无需创建元框或短代码。例如：

<div class="blright">
  <ul>
    <li>List Item 1</li>
    <li>List Item 1</li>
    <li>List Item 1</li>
    <li>List Item 1</li>
    <li>List Item 1</li>
  </ul>
</div>

.blright {
  float:right;
  width:auto;
  max-width:30%;
}
.blright ul {
  width: 100%;
  display:block;
  list-style: none;
}
.blright ul li{
  list-style: disc outside url("images/li.png");
}