Membuat reka bentuk 'kejatuhan salji' tersuai di WordPress

mencipta artikel gaya "salji jatuh" yang menakjubkan di WordPress dengan bidang adat maju

Tutorial ini menunjukkan cara membina artikel gaya "kejatuhan salji" yang menawan, mencerminkan reka bentuk sekeping John Branch ikonik New York Times. Kami akan memanfaatkan plugin Fields Advanced Custom (ACF) dan bidang kandungan yang fleksibel untuk mencapai ini.

Konsep Utama:

• Kaedah ini menggunakan medan kandungan fleksibel ACF untuk membuat susun atur dinamik. Ini membolehkan pelbagai blok kandungan (teks, imej wira, petikan tarik) dalam sebarang urutan dan kuantiti.
• Templat halaman tersuai () adalah penting untuk menjadikan kandungan dinamik ini. snowfall.php
ACF menyediakan fungsi untuk melingkari dan memaparkan kandungan setiap blok.

Inspirasi:

artikel "Snow Fall" New York Times, bersama-sama dengan kepingan yang sama dari Chicago Tribune dan The Verge, menunjukkan kuasa pemecahan dari susun atur standard untuk mencipta kandungan jangka panjang yang melibatkan secara visual. Tutorial ini membolehkan anda meniru pendekatan ini di WordPress.

Struktur artikel standard WordPress vs "Snow Fall":

Artikel WordPress biasa Ikuti struktur yang boleh diramal: imej yang dipaparkan, tajuk utama, teks badan, sidebars, komen, dan lain-lain artikel "Snow Fall" mengutamakan bercerita visual dengan imej skrin penuh, susun atur teks tersuai, dan banyak lagi.

Membina artikel "Snow Fall" anda:

Kami akan membuat tiga jenis blok kandungan: Teks Standard (WYSIWYG), Imej Hero (dengan Overlay Teks Pilihan), dan Tarik Petikan.

1. Persediaan Bidang Kustom Lanjutan:

Pasang dan aktifkan plugin ACF percuma dan medan kandungan fleksibel berbayar. Buat kumpulan medan baru bernama "Snow Fall Template Fields." Tambah medan "Kandungan Fleksibel" yang dipanggil "Blok Kandungan."

Dalam "Blok Kandungan," tambah tiga susun atur:

Teks standard:

mengandungi sub-mield WYSIWYG.

Hero Image:
• Mengandungi sub-mield imej dan sub-mield overlay teks.
Pull Quote:
• Mengandungi Sub-Field Quote dan Sub-Field Pengarang.

• 

  2. Halaman Templat Kustom (): snowfall.php Buat fail templat baru bernama

  dalam direktori tema anda:

  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. Mengaitkan medan ACF dengan templat:

  Dalam tetapan Kumpulan ACF Field, di bawah "lokasi," pilih "templat halaman" sama dengan "Template Snow Fall." Sembunyikan bahagian yang tidak perlu dalam tab Pilihan.

  4. Membuat dan Menggunakan Halaman:

  Buat halaman baru dan pilih "Templat Kejatuhan Salji." Anda kini akan melihat antara muka ACF untuk menambah dan mengatur blok kandungan anda.

  5. Styling:

  tambah CSS untuk gaya output untuk memadankan estetika "jatuh salji" yang anda inginkan.

  Panduan terperinci ini menyediakan asas yang mantap untuk mewujudkan artikel dinamik yang menakjubkan di WordPress. Ingatlah untuk berunding dengan dokumentasi ACF untuk pilihan penyesuaian selanjutnya.

Atas ialah kandungan terperinci Membuat reka bentuk 'kejatuhan salji' tersuai di WordPress. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!