محرر غوتنبرغ ، كيفية جعل المحررين وأنواع الحروف مريحة

هذا المنشور دفعني إلى كتابة مقال. المؤلف يعطي خدعة مضحكة للتخلص من div.container المجمع. للوهلة الأولى ، يعد هذا توفيرًا في المباريات ، لكن مبرمجي WordPress يعرفون الكثير. لنا ، Vordresgramists ، عروس الفرس.

ما هي مشاكلنا هنا:

1. من منظور SEO ، لا ينبغي تقسيم النص إلى أقسام
2. يجب استبدال التاريخ تلقائيًا
3. بالنسبة للمحرر ، يجب أن يكون تخطيط الصفحة خطيًا
4. البيج خلفية عرض صفحة كاملة
5. البقعة يمكن أن تغير اللون (وأحيانا الشكل) ((وأحيانا تتحرك)).

بالنسبة للبند رقم 2 ، سنكتب رمزًا قصيرًا بسيطًا لن نقدمه هنا. يجعل Gutenberg من السهل إدراج رموز مختصرة في النص.

لحل كل شيء آخر يمكنك ، بالطبع ، استخدام ACF. لكن فكر بنفسك -

• حقل للخط الأول
• مربع الفقرة بعد التاريخ
• مجال وصف البقعة

بالنسبة للمؤلف البسيط ، لن يكون هذا شفافًا على الإطلاق ، وسوف يتحول القالب إلى مجموعة من IFs.

هكذا

إليك كيفية حلها جميعًا:

• لا شيء سوى غوتنبرغ
• الفقرة الأولى هي السطر العلوي
• بعد ذلك ، رأس القسم H1
• ثم الرمز المختصر [تاريخ آخر]
• فقرة مع النص
• السحر - فاصل!
• جيدا ثم النص العادي

لدينا single.php يبدو شيء من هذا القبيل:

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

سيقوم the_content () بإخراج هذا:

 <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"> ...   ... 

محسنو البحث سعداء ، المؤلف يفهم كل شيء. وعلينا أن نجعل كل شيء.

لكن هذا بشكل عام ليس بالأمر الصعب:

 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%); } 

كل شيء آخر لا يستحق عناية خاصة ، والسحر الرئيسي هو في فاصل الموارد البشرية وحقيقة أن العناصر الزائفة يمكن أن يكون فيه. يمكن تغيير لون وسلوك الموقع ، على التوالي ، من خلال فئات من نفس الفاصل.

إذا أعجبك هذا الفيديو ، فانقر على "أعجبني" واشترك في قناتنا.
انتظر ثانية ، أليس هذا youtube؟ لا؟
حسنا ثم التقطيع سعيد