Gutenberg Editor, cara membuat editor dan huruf-huruf nyaman

Posting ini memotivasi saya untuk menulis artikel. Penulis memberikan trik lucu untuk menyingkirkan pembungkus div.container . Pada pandangan pertama, ini adalah penghematan pada pertandingan, tetapi programmer WordPress tahu banyak. Bagi kami, Vordresgramists, the mare's bride.

Apa masalah kita di sini:

1. Dari perspektif SEO, teks tidak boleh dibagi menjadi beberapa bagian
2. Tanggal harus diganti secara otomatis
3. Untuk editor, tata letak halaman harus linier
4. Latar belakang lebar halaman penuh beige
5. Bintik dapat berubah warna (dan terkadang bentuk) ((dan terkadang bergerak)).

Untuk item No. 2 kami akan menulis kode pendek sederhana yang tidak akan kami berikan di sini. Gutenberg membuatnya mudah untuk memasukkan kode pendek ke dalam teks.

Untuk menyelesaikan semua hal lain yang Anda bisa, tentu saja, gunakan ACF. Tapi pikirkan sendiri -

• bidang untuk baris pertama
• kotak paragraf setelah tanggal
• bidang deskripsi tempat

Untuk penulis sederhana, ini tidak akan transparan sama sekali, dan template akan berubah menjadi sekelompok IF.

Jadi

Inilah cara kami menyelesaikan semuanya:

• Hanya Gutenberg
• Paragraf pertama adalah baris teratas
• Selanjutnya, bagian header H1
• lalu shortcode [pasca-tanggal]
• paragraf dengan teks
• magic - Separator!
• baik dan kemudian teks biasa

Single.php kami terlihat seperti ini:

 <?php the_post(); get_header(); ?> <article> <?php the_content() ?> </article> <?php get_footer() ?> 

the_content () akan menampilkan ini:

 <p>  </p> <h1>  </h1> <time>2013-11-11</time> <p class="has-medium-font-size">"lorem ipsum ".repeat(20)</p> <hr class="wp-block-separator"> ...   ... 

Pengoptimal pencarian senang, penulis mengerti segalanya. Dan kita harus menyelesaikannya.

Tetapi ini, secara umum, tidak sulit:

 article { display:flex; flex-direction: column; align-items: center; } article { width: 960px; margin: auto; } hr { margin: 80px 0 70px; border: 0; padding: 1px 0 0; position: relative; } /*    */ hr::before { width: calc(100vw - 10px); /* -10px      -    .     . */ left: calc(480px - 50vw); content: ""; position: absolute; transform-origin: 0 100%; transform: scaley(1000); background: #f7f2eb; z-index: -1; height: 1px; margin: 0; border: none; } /*    */ hr::after { width: 130px; height: 120px; content: ""; background: url(blot.svg) 0 0 no-repeat; position: absolute; left: calc(100% + 100px); transform: translatey(-50%); } 

Segala sesuatu yang lain tidak layak mendapat perhatian khusus, sihir utama ada di pemisah SDM dan fakta bahwa elemen pseudo bisa ada di dalamnya. Warna dan perilaku tempat, masing-masing, dapat diubah melalui kelas-kelas pemisah yang sama.

Jika Anda menyukai video ini, klik Suka dan berlangganan saluran kami.
Tunggu sebentar, bukankah YouTube? Tidak
Baiklah Selamat Hacking