在WordPress中创建自定义的'降雪”设计

>用高级自定义字段在WordPress中创建令人惊叹的“降雪”样式文章

>本教程演示了如何在WordPress中构建迷人的“降雪”风格的文章，反映了《纽约时报》的标志性约翰·布兰奇（John Branch）的设计。 我们将利用高级自定义字段（ACF）插件及其灵活的内容字段附加来实现此目标。

密钥概念：

此方法使用ACF的灵活内容字段来创建动态布局。 这允许以任何顺序和数量的方式提供各种内容块（文本，英雄图像，拉动引号）。

>
• 自定义页面模板（
）对于渲染此动态内容至关重要。 ACF提供循环循环并显示每个块的内容的功能。 snowfall.php灵感：
《纽约时报》的“雪秋天”文章以及《芝加哥论坛报》和《边缘》的类似作品展示了从标准布局中断的力量，以创建具有沉浸式的，视觉上引人入胜的长格式内容。 本教程使您可以在WordPress中复制此方法。

>标准WordPress文章结构与“雪秋天”：

>

典型的WordPress文章遵循可预测的结构：特色图像，标题，身体文本，侧边栏，评论等。“雪秋天”文章优先使用全屏图像，自定义文本布局等。

构建您的“雪秋天”文章：

>

我们将创建三种内容块类型：标准文本（Wysiwyg），英雄图像（带有可选的文本覆盖）和拉动引号。

1。 高级自定义字段设置：

>安装并激活免费的ACF插件和付费的灵活内容字段附加。创建一个名为“ Snow Fall模板字段”的新字段组。添加称为“内容块”的“灵活内容”字段。

在“内容块”中，添加三个布局：

标准文本：

包含一个wysiwyg子场。

英雄图像：

包含一个图像子场和文本覆盖子场。

• 拉动报价：包含一个引用子场和作者子场。

• 

  2。自定义模板页面（snowfall.php）：

  >

  >在主题目录中创建一个名为snowfall.php的新模板文件：>

  <?php
  /*
  Template Name: Snow Fall Template
  */
  
  get_header();
  
  if ( have_rows('content_block') ) {
      while ( have_rows('content_block') ) : the_row();
          printf('<div class="%s">', get_row_layout());
          switch (get_row_layout()) {
              case 'standard_text':
                  if (get_sub_field('wysiwyg')) {
                      echo get_sub_field('wysiwyg');
                  }
                  break;
              case 'hero_image':
                  if (get_sub_field('image')) {
                      $image = get_sub_field('image');
                      echo wp_get_attachment_image($image['ID'], 'full'); // Use full-size image
                  }
                  if (get_sub_field('text_overlay')) {
                      echo '<h3 id="get-sub-field-text-overlay">' . get_sub_field('text_overlay') . '</h3>';
                  }
                  break;
              case 'pull_quote':
                  if (get_sub_field('quote')) {
                      echo '<p>' . get_sub_field('quote') . '</p>';
                  }
                  if (get_sub_field('author')) {
                      echo '<p>' . get_sub_field('author') . '</p>';
                  }
                  break;
          }
          echo '</div>';
      endwhile;
  }
  
  get_footer();
  ?>

  3。 将ACF字段与模板相关联：> 在“位置”下，在ACF现场组设置中，选择“页面模板”等于“降雪模板”。 在“选项”选项卡中隐藏不必要的部分。

  4。创建和使用页面：

  创建一个新页面，然后选择“雪秋天的模板”。现在，您将看到添加和排列内容块的ACF接口。

  >
  5。样式：

  添加CSS以样式的输出，以匹配您所需的“雪秋天”美学。

  该详细指南为在WordPress中创建视觉令人惊叹的动态文章提供了强大的基础。请记住要查阅ACF文档以获取进一步的自定义选项。

  >

以上是在WordPress中创建自定义的'降雪”设计的详细内容。更多信息请关注PHP中文网其他相关文章！