WordPress 性能困境

Question

我目前担心性能。目前情况是：

我想显示来自块编辑器或 Gutenberg WordPress 编辑器的内容。

我创建了一个页面模板并连接了一个页面。

<?php /* Template Name: Example Template */ ?>

<?php get_header(); ?>
 <?php while(have_posts()) : the_post(); ?>
     <?php the_content();?>
 <?php endwhile; ?>
<?php get_footer(); ?>

从 the_content(); 中添加元素的最佳方法是什么？类。

例如。我想标题标签有一个示例类，但段落标签有其他类。 我有三个想法如何“解决”这个问题。

第一：

在页面模板内添加样式标签，并通过 CSS 定位元素。

<?php /* Template Name: Example Template */ ?>
<style>
    .main h1 { color: red; } .main p { color: green; }
</style>
<?php get_header(); ?>
 <?php while(have_posts()) : the_post(); ?>
     <div class="main">
          <?php the_content();?>
     </div>
 <?php endwhile; ?>
<?php get_footer(); ?>

第二个：

通过 jQuery 添加目标类。

<?php /* Template Name: Example Template */ ?>
<?php get_header(); ?>
 <?php while(have_posts()) : the_post(); ?>
     <div class="main">
          <?php the_content();?>
     </div>
 <?php endwhile; ?>
<script>
     $("h1").addClass("color-red");
     $("p").addClass("color-green");
</script>
<?php get_footer(); ?>

或者从 Gutenberg 编辑器添加一个类。但我不确定，如果用户删除整个元素会怎样。不仅仅是内容。

Answer 1

在我看来，越简单越好。

我会使用主题的styles.css 文件或另一个已经存在的文件，并且只在模板中的main div 中添加一个类（此处为example 类）。

<?php /* Template Name: Example Template */ ?>
<?php get_header(); ?>
 <?php while(have_posts()) : the_post(); ?>
     <div class="main example">
          <?php the_content();?>
     </div>
 <?php endwhile; ?>
<?php get_footer(); ?>

这样您就可以在 CSS 文件中定位 html 的每个元素

.main.example h1 { color: red; } 
.main.example p { color: green; }