WordPress页面内容样式与编辑器样式不同[重复]

Question

我正在开发一个 WordPress 主题。对于我在编辑器中的页面内容，它看起来像这样：

这是我想要的风格。但是，当我在 page.php 中输出它时，样式会变成这样：

如您所见，文本对齐方式和字体变得完全不同。我应该如何处理我的主题以使输出样式看起来与编辑器中的完全一样？谢谢

这是我的 page.php 代码：

<?php get_header(); ?>

<div id="content" class="row card index-card" role="main">
    <div class="col-xs-12">
        <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
            <div class="entry-header">
                <h3 class="page-title entry-title" item-prop="headline">
                     <?php the_title(); ?>
                </h3>
            </div>
            <div class="entry-content" item-prop="text">
                <?php echo $post -> post_content; ?>
            </div>
        </article>
    </div>
</div>

<?php get_footer(); ?>

和functions.php：

<?php

add_theme_support('post-formats');
add_theme_support('post-thumbnails');

// Adding stylesheets and js libraries
function installLibraries() {
    // CSS
    wp_enqueue_style('bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
    wp_enqueue_style('bootstrap-theme', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css');
    wp_enqueue_style('slick', 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css');
    wp_enqueue_style('slick-theme', 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css');
    wp_enqueue_style('navbar-style', get_template_directory_uri() . '/css/navbar.css');
    wp_enqueue_style('footer-style', get_template_directory_uri() . '/css/footer.css');
    wp_enqueue_style('style', get_stylesheet_uri());

    // JS
    wp_enqueue_script('jquery', get_template_directory_uri() . '/js/jquery.min.js', array('jquery'), null, true);
    wp_enqueue_script('slick', 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js', array('jquery'), null, true);
    wp_enqueue_script('masonry', 'https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js', array('jquery'), null, true);
    wp_enqueue_script('bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js', array('jquery'), null, true);
    wp_enqueue_script('index', get_template_directory_uri() . '/js/index.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'installLibraries');


// Adding menu support as well as walker
require_once('wp-bootstrap-navwalker.php');
register_nav_menus(array(
    'main_menu' => __('Main Menu', 'mw-material')
));
// Add search at the end
function nav_search($items, $args) {
    // If this isn't the primary menu, do nothing
    if( !($args->theme_location == 'main_menu') ) {
            return $items;
        }
    // Otherwise, add search form
    return $items . '<div class="search-dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                <img class="search-icon" alt="search" src='. get_template_directory_uri() . '/img/icons/search.png?>
            </a>
            <ul class="dropdown-menu">
                <li>' . get_search_form(false) .'</li>
            </ul>
        </div>';
}
add_filter('wp_nav_menu_items', 'nav_search', 10, 2);

这个特定的问题更多的是 WordPress

Answer 1

在 css 中将你的设置为 float:left。 那应该可以：http://jsfiddle.net/cornelraiu/kYDgL/1016/

How to wrap text around an image using HTML/CSS

添加

.entry-content img{float:left}