>用高級自定義字段在WordPress中創(chuàng)建令人驚嘆的“降雪”樣式文章

>本教程演示了如何在WordPress中構建迷人的“降雪”風格的文章，反映了《紐約時報》的標志性約翰·布蘭奇（John Branch）的設計。 我們將利用高級自定義字段（ACF）插件及其靈活的內(nèi)容字段附加來實現(xiàn)此目標。

密鑰概念：

此方法使用ACF的靈活內(nèi)容字段來創(chuàng)建動態(tài)布局。 這允許以任何順序和數(shù)量的方式提供各種內(nèi)容塊（文本，英雄圖像，拉動引號）。

>
• 自定義頁面模板（
）對于渲染此動態(tài)內(nèi)容至關重要。 ACF提供循環(huán)循環(huán)并顯示每個塊的內(nèi)容的功能。 snowfall.php靈感：
《紐約時報》的“雪秋天”文章以及《芝加哥論壇報》和《邊緣》的類似作品展示了從標準布局中斷的力量，以創(chuàng)建具有沉浸式的，視覺上引人入勝的長格式內(nèi)容。 本教程使您可以在WordPress中復制此方法。

>標準WordPress文章結構與“雪秋天”：

>

典型的WordPress文章遵循可預測的結構：特色圖像，標題，身體文本，側(cè)邊欄，評論等?！把┣锾臁蔽恼聝?yōu)先使用全屏圖像，自定義文本布局等。

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

>

我們將創(chuàng)建三種內(nèi)容塊類型：標準文本（Wysiwyg），英雄圖像（帶有可選的文本覆蓋）和拉動引號。

1。 高級自定義字段設置：

>安裝并激活免費的ACF插件和付費的靈活內(nèi)容字段附加。創(chuàng)建一個名為“ Snow Fall模板字段”的新字段組。添加稱為“內(nèi)容塊”的“靈活內(nèi)容”字段。

在“內(nèi)容塊”中，添加三個布局：

標準文本：

包含一個wysiwyg子場。

英雄圖像：

包含一個圖像子場和文本覆蓋子場。

• 拉動報價：包含一個引用子場和作者子場。

• 

  2。自定義模板頁面（snowfall.php）：

  >

  >在主題目錄中創(chuàng)建一個名為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>' . 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字段與模板相關聯(lián)：> 在“位置”下，在ACF現(xiàn)場組設置中，選擇“頁面模板”等于“降雪模板”。 在“選項”選項卡中隱藏不必要的部分。

  4。創(chuàng)建和使用頁面：

  創(chuàng)建一個新頁面，然后選擇“雪秋天的模板”?，F(xiàn)在，您將看到添加和排列內(nèi)容塊的ACF接口。

  >
  5。樣式：

  添加CSS以樣式的輸出，以匹配您所需的“雪秋天”美學。

  該詳細指南為在WordPress中創(chuàng)建視覺令人驚嘆的動態(tài)文章提供了強大的基礎。請記住要查閱ACF文檔以獲取進一步的自定義選項。

  >

以上是在WordPress中創(chuàng)建自定義的'降雪”設計的詳細內(nèi)容。更多信息請關注PHP中文網(wǎng)其他相關文章！