php - WordPress 页面内容风格与编辑器风格不同

标签 php css wordpress wordpress-theming custom-wordpress-pages

<分区>

我正在开发一个 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

最佳答案

在 css 中将你的设置为 float:left。这应该有效:http://jsfiddle.net/cornelraiu/kYDgL/1016/

How to wrap text around an image using HTML/CSS

添加