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}

WordPress页面内容样式与编辑器样式不同

1 个答案: