كيفية تنظيم تطوير ودعم مدونة على WordPress في 2Q19 وليس إصلاحها

فكر مقدمًا في التوسع ، واستفد من حلول Wordpress القياسية ، وصنع سمة WP بيديك ، واحرص على راحة مصمم التخطيط ، والتركيز على التنقل - وقم بتحديث مدونة الشركة بحيث يحبها القراء والمحررين والمديرين التنفيذيين. لقد فعلنا ذلك.

مدونة Promopult عمرها 9 سنوات. خلال هذا الوقت مر بالعديد من التحولات. يتحدث سيرجي غلازوف ، تقني مدونتنا والأشياء المهمة الأخرى في نظام Promopult ، عن الأخير.

لم يعد هذا موضوع نقاش ، لأنه أصبح هو المعيار: معيار سريع وبسيط لمدونة الشركة ، شخص ، شخصي ، نعم ، أيا كان ، WordPress. يمكنك القول ، ولكن الحقيقة لا تزال قائمة.

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

ما حدث في (بلدي) تبدأ - في عام 2016

هذا أمر نادر الحدوث عندما يقوم مطور بإنشاء كل شيء بدءًا من نقطة الصفر والتفكير فيه. في كثير من الأحيان ، تبين أنه بالفعل (في كثير من الأحيان حتى لفترة طويلة ، مع تاريخ منفصل ) هناك مشروع يحتاج إلى دعم. إعادة التصميم والتحرير والمعارف التقليدية الضخمة والمتطلبات. وفي ظروف كل شيء موجود ، من الضروري التنقل بسرعة وحل المشكلات بطريقة أو بأخرى.

قبلت المدونة في عام 2016 ، عندما كان لها تاريخ طويل بالفعل وليس كل شيء جميلًا كما أردت.

1. تصميم مدونة قديم مع تاريخ تسع سنوات.
2. عدم وجود نسخة للجوال / الكمبيوتر اللوحي بأي شكل من الأشكال.
3. أكثر من 600 وظيفة.
4. المشكلات الهيكلية المتعلقة بالمحتوى وتنظيمه: أكثر من 20 فئة ومئات من التسع زائد من العلامات (الآن أكثر ، لكننا توقفنا بالفعل).
5. تحتوي الخطط بالفعل على تغيير العلامة التجارية والانتقال إلى مجال جديد. هذا ينطبق أيضا على بلوق.
6. سلسلة طويلة من الإجراءات عند العمل مع الكود.
7. العمل دون التحكم في الإصدار (. جيت).

المهام الأولى: التعبئة والتصميم

كانت المهمة الأساسية هي إضافة القدرة على التكيف مع السمة الحالية للمدونة: لجعل مستخدمي المحمول قادرين على قراءة المنشورات واستخدام الموقع بشكل كاف - تحدثوا وكتبوا عن Mobile First أكثر وأكثر ، وأظهرت الإحصاءات أنهم يقرؤون المدونة من الجوال.

بالتوازي مع هذه الأعمال ، تم رسم تصميم جديد.

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

في سياق العمل على إصدار الهاتف المحمول ، رأيت سلبيات وضعف تنظيم عملية التطوير. أردت تسريع وتبسيط كل شيء.

كما كان لدينا مع العمل على الكود على المدونة

كان هناك إصدار DEV للمدونة مع قاعدة بيانات اختبار منفصلة. جرى العمل مع الملفات على خادم بعيد ، وتم الاختبار في عنوان منفصل ، لا يمكن الوصول إليه في العالم الخارجي. بعد العمل والاختبار وولادة وحدة معينة من المعنى - تم نشرها في مدونة المعركة من خلال نداء موجه إلى المشرف. ما فعله كان سحر منفصل.

بالنسبة للمدونة التي يتغير فيها شيء مرة واحدة في السنة ، فهي عملية رائعة. ولكن مع الإصدار الجديد واحتياجاته ، ستكون هذه العملية بمثابة ألم كبير.

ما أردت الحصول عليه ، كما يقولون ، "في عالم مثالي"

كل رمز يكمن في. مستودعات بوابة . الإصدار القتالي للمدونة هو master هذا المستودع. كل العمل مع الكود يحدث من خلال الالتزام بفرع أو فروع أخرى مرتبطة بمهام كبيرة فردية.

بعد الانتهاء من المهمة ، يتم إنشاء طلب سحب (PR) و / أو طلب دمج (MR) مع مجموعة من التعديلات. المعنى في MR و PR هو نفسه ، ولكن في خدمات مختلفة - اسم مختلف. لدينا GitLab ، لذلك دمج الطلب.

عند إنشاء MR ، يصبح عنوان مؤقت -git--test.dev.blog.promopult.ru النموذج - -git--test.dev.blog.promopult.ru متاحًا ، ويمكن الوصول إليه فقط عن طريق IP للتحقق المباشر على بيئة الاختبار.

تتم مراجعة الكود الموجود في MR الذي تم إنشاؤه والتحقق منه تلقائيًا (كود linter ، الذي أتحقق من بناء الجملة وفقًا للقواعد المحددة مسبقًا) وفي الوضع اليدوي (القوة الرأسية في الفريق ، ينظر timlid بعناية في عينيه المحدبة البحرية). بعد اجتياز المراجعة - من واجهة المتصفح الخاصة بمخزن .git ، يتم النقر فوق الزر دمج وستظهر جميع التغييرات على الهواء في المدونة القتالية بعد فترة زمنية قصيرة وجيزة.

إعادة تصميم ، النهج الأول

خطة عمل إعادة تصميم المدونة:

1. تخطيط النموذج الأولي الثابت لتخطيطات تصميم جميع الصفحات ؛
2. تحويل تخطيط ("الامتداد") إلى سمة WordPress.

تخطيط - مرحلة منفصلة من العمل. للعمل المريح مع الأنماط (CSS) ، والترميز و JS ، استخدم المشروع مجموعة من الإضافات والوحدات النمطية ، والتي يتم تجميعها من خلال مهام Gulp الموضحة في منشئ SPT (بدء مشروع القالب).

الكلمات الأساسية المستخدمة في أداة تجميع موضوع مدونة ثابتة هي: HTML و CSS و JS و Babel و Gulp و PostCSS و SCSS و Nunjucks.

عند الانتهاء من التصميم ، كانت البنية على النحو التالي ( يشار إلى أدلة المستوى الأول فقط ):

  ├── تصميم # تصميم وتخطيطات وجميع
 ├── التطبيق / # مصادر المشروع: وحدات منفصلة
 ├── dist / # النسخة المجمعة من المشروع (ملفات html) وجميع الإحصائيات
 ul gulpfile.js / # Config Gulp.js
 └── package.json # Collector config file: الحزم والنصوص 

كان كل عنصر من عناصر الدلالة المرئية الفردية في الصفحة ، على سبيل المثال ، بطاقة نشر ( /components/article_card/ ) ، عبارة عن مجلد كان عليه:

- ملف العلامات ( article_card.html ) ،

- ملف الأنماط ( article_card.scss ) ،

- ملف JS ( article_card.js ).

وتم تجميع كل صفحة من كتل مكونة منفصلة. تعتبر الكتل ملائمة للمعالجة ، ولا تؤثر أي تغييرات على العناصر المجاورة.

في الخرج ، أنشأ المجمّع مجلد dist ، الذي يحتوي على ملفات html جاهزة للصفحات للعرض المرئي في المستعرض في مرحلة التحرير والتنسيق ، بالإضافة إلى ملف نمط واحد ، وجميع السمات app.js JS: وصف ملف واحد ( app.js ) المنطق والسلوك يحتوي الموقع الثاني ( vendor.js ) على جميع المكتبات المستخدمة للموقع (jQuery و fotorama و magnific-popup وغيرها).

بعد ذلك ، تحتاج إلى تحويل كل هذا إلى سمة WordPress والتفكير في بنية الملف. بحيث يمكنك العمل بشكل مريح مع تصميم ثابت ، وبجواره وضع سمة WP.

قائمة التصاميم التي أعدها المصمم. إنها نفس ملفات سمات مدونة WordPress:

• الصفحة الرئيسية (ملف home.php ).
• صفحة نشر / مشاركة single.php ( single.php ).
• عرض صفحة نصية واحدة ( page.php ).
• صفحة الاشتراك في النشرة الإخبارية ( subscribe.php ).
• خطأ 404 ( 404.php ).
• صفحة علامة منفصلة ( tag.php ).
• صفحة الفئة منفصلة ( category.php ).
• نتائج البحث والبحث ( search.php ).

سير العمل مع هذا النهج وفصل الإصدار الثابت وإصدار WordPress للموضوع كالتالي: إذا كنت بحاجة إلى إصلاح شيء ما في الجزء المرئي ، يتم إجراء التغييرات في الإصدار الثابت وبعد نقل الاختبار إلى السمة. إذا كانت التعديلات مطلوبة في جزء غير مرئي ، فيتم تغيير ملفات سمة WP فقط.

مجلد موضوع المدونة هو bsp . إنه موجود على طول المسار في المجلد مع مواضيع المدونة نفسها:

  ├── wp-content / # مخصص موقع ملفات وورد
 ├── ├── المواضيع / # موضوعات الموقع
 ├── │ ├── التطبيق / # مصادر موضوع ثابت
 ul │ │ ├── gulpfile.js / # Gulp- المهام للتجميع
 ├── │ ├── dist / # بناء موضوع ثابت
 / │ │ ├── الأصول / # الموارد: JS ، CSS والرسومات 
 ├── │ ├── bsp / # WP-PromoPult Blog Theme
 / │ │ ├── الأصول / # الموارد: JS ، CSS والرسومات ، نسخ من `/ dist /`
 ├── │ │ ├── home.php # الصفحة الرئيسية للمدونة وغيرها من الملفات في جذر الموضوع 

مكان وورد موضوع واضح ومحددة سلفا من قبل هيكل ملف وورد نفسها.

لا توجد موضوعات أخرى في دليل السمات - تم حذف كل شيء قياسي. هناك أسطورة حول زيادة الإنتاجية بهذه الطريقة ، لكننا لم نلاحظ ذلك. يتم ذلك أكثر للطلب في الكود. لا حاجة لتخزين ما لم يتم استخدامه وبالتأكيد لن يتم استخدامه.

أيضا في. جيت هي جميع الإضافات WP المستخدمة. على موقعنا ، هذه هي خرائط Google XML Sitemap و RSS لـ Yandex Turbo و RusToLat و WP-PostViews.

تم نقل النموذج الأولي الثابت والمترجم لصفحات المدونة والملفات المصدر إلى دليل سمة المدونة: للتفاعل بشكل ملائم مع الجزء المنطقي من القالب ومع كل ما هو مسؤول عن مظهر وسلوك العناصر الموجودة في الصفحة.

تم وضع نسخة ثابتة من تجميع المشروع - مع المصدر وجميع التبعيات في المحاولة الأولى لتنظيم الهيكل - في دليل السمات.

أي أنه بجانب السمة الرئيسية bsp ، تمت إضافة دليل /app ، حيث يوجد الكود المصدري لتخطيط السمة وجامع gulp. ولكن في هذا الإصدار ، كانت هناك لحظة واحدة صعبة: تم إنشاء ملفات ثابتة في دليل منفصل ، ولكي تكون التغييرات في سمة WP ، كان من الضروري نسخ النمط الثابت وملفات البرامج النصية إلى مجلد assets داخل السمة.

النهج الثاني: نسخة جديدة من الهيكل

في الأسابيع الأولى ، تم تحديد ذلك بواسطة برنامج نصي بسيط لوحدة التحكم قام بنسخ الملفات التي تم جمعها من سمة ثابتة إلى سمة WP. العمل المفرط يؤدي إلى أخطاء. لذلك ، كان الخيار فقط لتصحيح الهيكل.

لدينا ثلاثة أدلة مهمة (على طول الطريق من الجذر):

1. موضوع WP: /wp-content/themes/bsp
2. مصادر موضوع ثابت: /app
3. موضوع ثابت تم جمعه: /dist

وداخله هناك assets مع ملفات الأنماط والرسومات و JS

تحتاج إلى ترتيب كل شيء حتى يتم جمع ملفات الأنماط الثابتة والبرامج النصية في المجلد المطلوب ( /wp-content/themes/bsp/assets ).

كان الإصدار الجديد من الهيكل كما يلي:

  ├── gulpfile.js / # Gulp- المهام للتجميع
 ├── wp-content / # مخصص موقع ملفات وورد
 الإضافات / الإضافات WP #
 ├── ├── المواضيع / # موضوعات الموقع
 ├── │ ├── bsp / # PromoPult Blog Topic
 ├── │ │ ├── التطبيق / # مصادر موضوع ثابت
 / │ │ ├── الأصول / # الموارد: JS ، CSS والرسومات (الإنشاء التلقائي)
 ├── │ │ ├── home.php # الصفحة الرئيسية للمدونة وغيرها من الملفات في جذر الموضوع
 ├── wp-admin / # WP-files للوحة الإدارة
 p wp- يتضمن / # WP- ملفات النظام 

في جذر المشروع بأكمله ، هناك مهام جليلة - ويتم تنفيذها من الجذر. يصف تكوين مهام gulp الهيكل الذي يتم به تجميع الملفات الثابتة من دليل wp-content/themes/bsp/app إلى wp-content/themes/bsp/assets دون أي إجراءات إضافية مثل النسخ ، إلخ.

تظل ملفات سمة WP كما هي ويتواصل العمل وفقًا للسيناريو القديم: التعديلات في الإحصائيات ← نقل إلى ملفات WP. يتم إنشاء إحصائيات CSS و JS مباشرة في مجلد السمة وكل شيء يعمل فقط.

كل هذا كان حول عملية العمل. الآن حول كيفية ترتيب المدونة.

PromoPult المدونة: كيف يعمل

القوة الرئيسية للمدونة هي الفريق. محرر ، المؤلفين ، مصممي التخطيط.

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

المرجعية قبل النشر

أي عمل مهم للسيطرة. يعد تخطيط المقالة عملية قياسية رسمية يمكن تقديمها بسهولة في شكل قائمة تحقق.

رأى الرجال الفكرة من EmailSoldiers . قررنا تطبيقه في المنزل.

إذا لم يتم التحقق من أي عنصر ، فإن النظام سوف يحذرك قبل النشر.

بالنقر على الروابط ، تسطير الروابط في عنصر القائمة - تسليط الضوء على عنصر معين.

يتم تصنيف قائمة التحقق بنفس الترتيب مثل إعدادات النشر الإضافية في لوحة المسؤول.

إعدادات نشر المدونة

متشابكة بشكل وثيق مع قائمة مراجعة المنشور المذكورة أعلاه.

عند تطوير الموضوع ، حاولت عدم استخدام الإضافات ، ولكن في إيجاد حل بسيط وسهل لمهام الموضوع. أبرز الملامح:

• أوصاف العلامات الفوقية لكبار المسئولين الاقتصاديين.
• أوصاف علامات OpenGraph التي تستخدم الشبكات الاجتماعية لمشاركة المواد وتشكيل بطاقات مقالة لطيفة.
• عمل مريح مع صور الغلاف للوظائف. مطلوب صورة واحدة - يتم إضافتها إلى بطاقة النشر في لوحة المنشور ، والتي يتم عرضها على الصفحة الرئيسية وعلى صفحة العنوان أو العلامة.
• إعدادات السمة الإضافية: يمكن أن يكون منشور مع غطاء أو بدونه ، وهناك نص إعلان قصير نعرضه في الرأس مع غطاء ، ويستخدم أيضًا في وصف المقالة في قائمة المراسلات البريدية.

يتم تطبيق قسم إعدادات النشر من خلال صناديق التعريف والحقول المخصصة في WordPress.

من خلال صندوق التعريف ، تمت إضافة قائمة مراجعة المنشور.

في النماذج ، يكون العمل مع الحقول أمرًا بسيطًا: إذا لم يكن الحقل فارغًا ومملوءًا ، فسنحصل على القيمة ونعرضه. على سبيل المثال ، هذه هي الطريقة التي يتم بها عرض رد فعل الكتلة على المنشور:

 <?php if (get_post_meta($post->ID, 'postreaction', true)) { ?> <div class="article_reaction"> <div class="label-reaction"><span><?php echo get_post_meta($post->ID, 'postreaction', true); ?></span></div> </div><!-- /.article_reaction --> <?php } ?> 

مثال لخرج التفاعل على بطاقة النشر:

أشياء صغيرة لطيفة

هناك بعض الأشياء الصغيرة التي ربما لا يراها أحد. ولكن إذا لاحظ شخص ما - جيد.

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

آخر تعليق العداد. جادلوا لفترة طويلة أن "0 تعليق" أو "لا توجد تعليقات" مربكة للغاية. الحل بسيط للغاية: لا تُظهر عداد التعليقات مطلقًا إذا كان هناك أقل من تعليق واحد.

بشكل عام ، نحن نعمل على نظام تعليق بشكل منفصل ونود التحدث عنه في منشور كبير منفصل. نحن نصنع نظام تعليق بسيط ومريح بترخيص بسيط من خلال الشبكات الاجتماعية.

الإعجابات الخاصة: يعد تعليق أو مشاركة الروابط على الشبكات الاجتماعية أمرًا طويلاً بمعدل استهلاك المحتوى ، ولكن انقر فوق "أعجبني" وأوضح أن المقالة رائعة - بسيطة وسريعة. لقد جعلنا أمثالنا البسيطة ووضعت العداد على البطاقة البريدية. ويصل الإعجاب بسرعة كبيرة. ونظرًا لأنها في أسفل المقالة ، فإنها أيضًا إشارة إلى أن النص قد تمت قراءته.

لقد صنعوا موضوعًا غامقًا لمدونتهم - الآن أصبح من المألوف. نظرًا للهيكل المعياري (في الواقع ، الموقع عبارة عن مجموعة من الكتل التي يتم دمجها بطريقة أو بأخرى فيما بينها) وتنظيم الأنماط ، اتضح أنه تم القيام به بسرعة كبيرة.

حول تقنية مثيرة للاهتمام

هناك تصغير لرمز الترميز و CSS و JS في الموضوع. يتم ضغط CSS و JS من خلال مهام gulp في جامع الإحصائيات ، ولكن يتم تصغير العلامة من خلال ربط WordPress WP_HTML_Compression .

وفي التعليقات الواردة في الترميز ، أضفنا شفرة ترويجية لأولئك المهتمين بكيفية ترتيب الموقع من الداخل ومن يذهب أولاً وقبل كل شيء للنظر في الكود المصدري:

CSS و JS التخزين المؤقت. للتخزين المؤقت للأنماط وملفات البرامج النصية ، ولكن تكون ذات صلة دائمًا ، إذا قمنا بإعادة تحديد شيء ما ، فنحن نستخدم filemtime (). يستخدم الكثيرون في هذه الحالة ?<?php echo time(); ?> ?<?php echo time(); ?> . لكن هذا الخيار يقوم بتنزيل الملف وتقديم طلب مع كل مكالمة.

من الأفضل استخدام مثل هذه الخدعة:

 <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/assets/styles/style.css?t=<?php echo filemtime(get_theme_file_path().'/assets/styles/style.css'); ?>" /> 

في هذه الحالة ، سيتم تنزيل الملفات إذا تم تغييرها ، وسيضاف تاريخ تعديل الملف إلى معلمة الطلب.

ما الإضافات التي نستخدمها

على الرغم من إمكانية ورغبة في الحصول على بعض القرارات في بعض الحالات ، ما زلنا نستخدم المكونات الإضافية. قائمتنا هي كما يلي:

• خرائط مواقع XML من Google - لإنشاء خريطة موقع XML لبرامج الروبوت ؛
• آر إس إس لياندكس توربو - صفحات توربو لياندكس ؛
• RusToLat - حرفي من الأحرف الروسية URL إلى اللغة الإنجليزية.
• الفسفور الابيض PostViews - التهم وجهات النظر من المواد.
• Classic Editor - يتضمن محرر WordPress الكلاسيكي بدلاً من الكتلة الجديدة Gutenberg ؛
• الحد من محاولات التفويض هو للأمن: مع العديد من محاولات تسجيل الدخول الخاطئة ، فإننا نحظر محاولة واردة لفترة مخصصة من الوقت ؛
• AMP - صفحات AMP لـ Google.

نصائح خاتمة للعاملين في مدونة الشركة

• أنصحك في بداية العمل في المشروع أن تفكر فورًا في التوسع.
• تأكد من استخدام .git في عملك. لعام 2019 ، بالطبع ، نصيحة غريبة ، ولكن هذه النصيحة يمكن أن تنقذ شخص ما من الشعر الرمادي والتوبيخ عندما يحدث خطأ ما.
• من الأفضل تقسيم التطوير والعمل على سمة WordPress على مرحلتين: أولاً ، قم بتكوين شيء ثابت ، وتم بالفعل "سحب" شيء مثل سمة WordPress.
• إذا كانت هناك فرصة - وقت وفريق وفهم لماذا تحتاج إلى كل هذا - فعل ذلك بنفسك ، دون استخدام خيارات جاهزة. فوز بالترتيب وفهم كيف يعمل كل شيء. أنت لن تنتج العكازات.
• استخدم روابط وميزات WordPress القياسية إذا كانت مدونتك مبنية عليها. تخصيص وصنع حل مناسب سريع وسهل.
• اجعلها مريحة للمستخدم والمحررين.
• لا تنسى عن الشبكات الاجتماعية والتخطيط الجزئي.
• لا تنس الإصدارات المحمولة.
• لا تنسَ التحديثات المنتظمة للمكونات الإضافية والأنظمة.
• حدد فقط الإضافات التي أثبتت جدواها.

يستمر العمل على المدونة - ابق معنا.