
كانت المهمة هي إنشاء منصة لمطوري PCB بالوظائف التالية:
- الآلات الحاسبة التي تبسط أداء العمليات الحسابية المحددة ؛
- قاعدة المعرفة لتطوير لوحات الدوائر المطبوعة ؛
- مدونة جماعية
- رسائل خاصة.
كنت في البداية متشككًا في إمكانية القيام بذلك في WP دون كتابة وحدات مخصصة. تعتبر المواقع والمدونات والمتاجر عبر الإنترنت من صفحة واحدة بسيطة - نعم ، لكن الحسابات الهندسية؟ لكن كل شيء نجح - إنه جيد جدًا لإثبات المفهوم ، وأكثر من ذلك. سأقدمها في شكل قضايا منفصلة حتى يتم تنظيمها.
مرة أخرى ، أنا مطور طباعة ، لذلك عندما تمكنت من تحقيق ما أريده من خلال تغيير كود PHP الخاص بالمكون الإضافي ، كنت سعيدًا للغاية. هذا هو ، ما سأتحدث عنه هو لأولئك الذين يرغبون في إنشاء موقع ، لكنهم لا يفهمون تعقيدات WP و CSS و PHP ، على الرغم من أنهم بشكل عام يفهمون البرمجة ولا يخشون البرمجة.
1. أدوات التطوير
لم أقم بإجراء تحليل مقارن طويل للبرامج ؛ كان يكفي بالنسبة لي أن يتم حل المهمة الضرورية. هذا ما استخدمته:
- Visual Studio Code هو محرر مجاني لطيف لعرض وتحرير كود البرنامج المساعد.
- Firefox Developer Edition - لعرض الصفحات وتحريرها وتحليلها ؛
- FileZilla - لمشاركة ملفات البرنامج المساعد / السمات مع الخادم ؛
- قائد المجموع - للبحث عن الملفات بنص محدد.
سأقوم هنا أيضًا بتضمين مكون إضافي واحد لـ WP - Loco Translate ، ببساطة أداة لا يمكن الاستغناء عنها لإنشاء أو تعديل ترجمة المكونات الإضافية.
بالنسبة إلى WP نفسها ، في مقطع YouTube باللغة الإنجليزية ، ربما يتم إخبار كل شيء (لا أتذكر عدم العثور على إجابة للسؤال الذي نشأ) ، فهناك العديد من القنوات الجيدة ، أود أن أذكر قنوات WPBeginner و WordPress Tutorials.
2. الآلات الحاسبة
يحتوي WP على عدد كبير من المكونات الإضافية ، لكن إجراء الحسابات ليس مهمة نموذجية على الإطلاق ، ما لم يتم حساب تكلفة البضائع أو التأمين. ولكن هناك مكون إضافي لهذه المهمة. عندما وجدتها ، أدركت أن الفكرة قابلة للتحقيق. نموذج الحقول المحسوبة - وحتى في الإصدار المجاني ، يسمح لك بإنشاء نماذج للحسابات ، بشكل عام ، إنه رائع. يجب تحديد الواجهة ومحرر الصيغة ، لكنهما منطقيان وموثقان جيدًا. إليك ما تبدو عليه قائمة التحرير باستخدام إحدى الآلات الحاسبة كمثال.

هناك عدة أنواع من الحقول ، بما في ذلك تلك التي تسمح لك بترتيب محتويات النموذج بشكل مرئي ، ولكن الحقول الرئيسية هي حقول الإدخال (التحديد أو الإدخال المباشر لقيمة) والإخراج (القيم المحسوبة).
لكل حقل معرف خاص به برقم تسلسلي مثل "اسم الحقل٪ n" ، في الواقع هو اسم متغير يستخدم في العمليات الحسابية في الحقول المحسوبة. في هذه الحالة ، يمكن إخفاء الحقول المحسوبة للخدمة.
من بين الوظائف الجاهزة هناك كل ما تحتاجه حتى بالنسبة للحسابات المعقدة ، بما في ذلك حساب المثلثات والمثلث العكسي. يسمح لك بناء جملة الحقل المحسوب باستخدام تفريع if-else ووظائف js ومكالمات الجهات الخارجية ( إليك مثال من الوثائق). مثال على بناء جملة الوظيفة:
( function() {
if( fieldname3 > 100 ) return fieldname1+fieldname2;
if( fieldname3 <= 100 ) return fieldname1*fieldname2;
} ) ();
ميزة مفيدة للغاية هي إنشاء تبعيات العرض على قيم الحقول المختارة. هذا هو القسم ذي الصلة من الوثائق ، وإليك ما يبدو عليه في مثال:

لأكون صادقًا ، أنقذني البرنامج المساعد. بالطبع ، تبين أن الصفحات مرهقة ، لأنه في بعض العمليات الحسابية هناك عدة عشرات من الحقول المحسوبة والصيغ المعقدة. أريدها أن تطير ، لذا فإن خططي هي التعامل مع استدعاء وظائف الطرف الثالث التي من شأنها تسهيل الواجهة ، على الرغم من أنني ما زلت لا أملك أي فكرة عن كيفية القيام بذلك. حسنًا ، هذه خطوة بخطوة ، سأكتشفها.
المزيد من الخبرة ، ما الذي أوصي به:
- Excel ( , : «», «POW»), , .
- , , . , .
- (, ) ' '.
- – «Div», . , . «» , «».
3.
توفر بعض المكونات الإضافية وظائف أساسية في الإصدار المجاني ، ولكنها تحد من خيارات تخصيص المظهر ، على الرغم من أن تخصيص العرض بسيط للغاية. هناك نوعان من الأدوات لهذا - CSS ورمز PHP نفسه. سأشرح ذلك على أنه أحد الهواة.
3.1. التصميم باستخدام CSS
لكل عنصر من عناصر صفحة html ، يمكنك تحديد نمط العرض باستخدام CSS:
CSS- {
_1: ;
_2: ;
}
تحتاج فقط إلى google حول المحددات والخصائص ، تطوير الويب موثق جيدًا بشكل عام ، حتى باللغة الروسية ، لذلك لا توجد مشكلة. سأقدم فقط بعض التعليقات.
لمعرفة النمط الذي يتم تطبيقه على عنصر ومعرفه ، تحتاج إلى Firefox Developer Edition أو ما يعادله. يؤدي النقر بزر الماوس الأيمن على عنصر واختيار "فحص العنصر" إلى عرض سحر.
لنلق نظرة على المحددات في هذا المثال. عنصر الاهتمام هو حقل إدخال اسم المستخدم. يحتوي كود html على فئة ومعرف ، لذا يمكنك استخدامه كمحدد:
.input-text input // ._ _ (. 1)
input.input-text // _._ (. 2)
#fep-message-top input // #id _ (. 1)
input#fep-message-top // _#id (. 2)
#fep-message .input-text // #id _
محدد المعرف هو أكثر "قوة" ، لأنه لا يمكن أن توجد عناصر بنفس المعرف في نفس الصفحة. لذلك إذا تم استخدام نموذج مكون إضافي معين فقط على صفحة واحدة أو كان نمط العرض مناسبًا لجميع الحالات ، فإن محدد المعرف هو ما تحتاجه. ولكن ماذا لو لم يتم تعيين معرف للعنصر ، وهو ما يحدث غالبًا. ثم يجدر النظر في وجود معرف في الكتل الأم. على سبيل المثال ، في هذه الحالة ، تحتوي الحاوية على معرف = "user_box". ثم يمكن الوصول إلى العنصر على النحو التالي:
div#user_box input // _#id _
يمكن أن يكون التعشيش أكثر. كمثال:
div.fep-field div.field-with-icon input //
نظرًا لأن الوصول في هذه الحالة ليس معرفًا ، فإن النمط الموضح لهذا المحدد سيكون قابلاً للتطبيق على كل من حقل إدخال اسم المستخدم وحقل إدخال موضوع الرسالة (كلاهما في حاويات فئة "field-with-icon").
خيار آخر قد يكون مفيدًا هو محدد قيمة الخاصية. لهذا المثال:
input[type="text"] // «type»
أعتقد أن الجوهر واضح تقريبًا ، والتجربة والخطأ يعملان بشكل رائع هنا. الجميل هو أن Firefox DE يسمح لك بتعديل كود الصفحة ، المحددات ، الخصائص على الفور. نحقق النتيجة المرجوة - وننقل التغييرات الناتجة إلى الخادم. هناك ثلاث طرق لهذا:
- في المكون الإضافي ، قد تحتوي الإعدادات على حقل مثل "Custom CSS" ، "أنماط إضافية" ، وما إلى ذلك ؛
- الشيء نفسه في إعدادات مظهر المظهر ؛
- إجراء تغييرات على الملف المصدر باستخدام CSS (مظلل في الصورة أعلاه) - بهذه الطريقة لم أنجح في ملف النمط العام للموضوع style.css ، هناك شيء صعب القيام به.
بين قيم نفس الخاصية في محددات مختلفة ، سيتم دائمًا تحديد القيمة ذات الأولوية القصوى. المنطق هو أن التعريف المحلي له أولوية أعلى من التعريف العام. في حالة استحالة تجاوز خاصية باستخدام محدد ، أي معدِّل "! هام" ، الذي يرفع أولوية القيمة:
input[type="text"] {
padding-left: 40px !important; //
}
آخر ما يمكن قوله عن المحددات هو بناء الأنماط المتجاوبة "media" ، والتي تنشط المحدد في ظل ظروف معينة: الحد الأدنى أو الأقصى لعرض العرض ، إلخ. إليك مثال على الاستخدام:
@media(max-width:650px) { //
.comment-body .avatar {
width: 50px !important; //
}
}
بالنسبة للخصائص نفسها ، هناك الكثير منها وتحتاج إلى إلقاء نظرة على الوثائق الخاصة بمهمة محددة. أسهل ما يمكنك فعله هو تغيير اللون وتحديد الموضع ونسخ النمط النهائي. اختيار اللون مناسب سريعًا في Firefox DE. فيما يتعلق بالموضع ، تحتاج إلى فهم القيم المختلفة لخاصية "العرض" وقراءة ، على سبيل المثال ، هذه المقالة.
3.2 تخصيص العرض باستخدام PHP
السببان الرئيسيان لتحرير كود البرنامج المساعد PHP هما استبدال النص وتحرير تخطيط الصفحة.
3.2.1. استبدال النص
بالنسبة للأول ، بطريقة ودية ، يجب حلها باستخدام قائمة الإعدادات الخاصة بالمكون الإضافي نفسه ، أو باستخدام المكون الإضافي Loco Translate. كيف يعمل تعريب البرنامج المساعد بشكل عام؟ يتم تحديد لغة الموقع في الإعدادات العامة في وحدة تحكم WP وهذا يحدد ملف الترجمة الذي سيتم استخدامه. يحتوي ملف الترجمة (بامتداد .po) على الهيكل التالي:
#: utilities.php:1910 utilities.php:2095 //
msgid "Lost your password?" //
msgstr " ?" //
في السطر المقابل من ملف utilities.php (1910 ، على سبيل المثال) نجد:
$str .= '<div class="impu-form-links-pass"><a href="'.$lost_pass_page.'">'.__('Lost your password?', 'ihc').'</a></div>';
هنا يمكنك رؤية السلسلة الأصلية ومعرف المجال النصي للمكون الإضافي "ihc" ، وسيتم استبدال السلسلة المترجمة كنتيجة لذلك. يوفر تطبيق Loco Translate واجهة بسيطة ومريحة للعمل مع ملفات الترجمة.

تحتوي هذه الأسطر أحيانًا على أحرف تحدد تنسيقات الإخراج -٪ s و٪ d وما إلى ذلك. - في الترجمة ، بالطبع ، يجب الحفاظ عليها. معهم ، بالمناسبة ، هناك مشاكل مع نهايات الجمع والمختلفة لأرقام مختلفة ("3 تعليقات" ، "5 تعليقات") ، عليك الخروج.
لذلك ، في بعض الأحيان ، إذا لم يشر المطورون إلى الإدخال في ملف الترجمة ، فلا يمكن الوصول إليه بالطريقة المذكورة أعلاه. عليك أن تتصرف بشكل مختلف. يتم تنزيل جميع ملفات المكونات الإضافية من دليل / wp-content / plugins / plugin_name وباستخدام البحث بالسطر أو جزء من سطر (Total Commander أو تناظري للمساعدة) ابحث عن ملف php الذي يحتوي عليه (إنه أمر جيد إذا كان فريدًا ، وليس " تسجيل الدخول "). ويمكنك إما استبدال السلسلة مباشرة في الكود ، أو إضافة إدخال في ملف الترجمة وإجراء الترجمة المطلوبة.
3.2.2. تحرير التخطيط
قد ينشأ موقف عندما تريد تغيير شيء لا يتغير في إعدادات المكون الإضافي أو السمة. سأستعرض مثالا واحدا هنا. إذا أثار هذا القسم اهتمامًا وأسئلة ، فسأكمله. الأهم من ذلك كله ، كنت أقوم بتعديل المكون الإضافي Front End PM للمراسلات الشخصية . وظائف غير شائعة ، لذلك ربما يكون هذا هو المكون الإضافي الوحيد الذي ينفذه ، وبالتالي ، فإن التفاصيل في جزء العرض منخفضة. أعدت الملف الأصلي الذي شكل الجزء العلوي من الصفحة لإظهار كيف تم ذلك بالتتابع.

نجد من خلال "فحص العنصر" الكتلة التي نريد تغييرها والبحث عن المعرفات الفريدة للبحث - هذه هي أسماء أو معرفات فئة خاصة بالمكونات الإضافية ، أولاً وقبل كل شيء. هنا معرف = "fep-header" تم تعيينه للحاوية المشتركة. يؤدي البحث عن تواجد سطر إلى ملف باسم header.php واضح التفسير. افتح باستخدام VS Code ولاحظ الكود التالي:
<div id="fep-header" class="fep-table">
<div>
<div>
<?php echo get_avatar( $user_ID, 64, '', fep_user_name( $user_ID ) ); ?>
</div>
<div>
<div>
<strong><?php esc_html_e( 'Welcome', 'front-end-pm' );?>: <?php echo fep_user_name( $user_ID ); ?></strong>
</div>
<div>
<?php echo strip_tags( sprintf( __('You have %1$s and %2$s unread', 'front-end-pm'), '<span class="fep_unread_message_count_text">' . sprintf( _n( '%s message', '%s messages', $unread_count, 'front-end-pm' ), number_format_i18n( $unread_count ) ) . '</span>', '<span class="fep_unread_announcement_count_text">' . sprintf( _n( '%s announcement', '%s announcements', $unread_ann_count, 'front-end-pm' ), number_format_i18n( $unread_ann_count ) ) . '</span>' ), '<span>' ); ?>
</div>
<div class="<?php echo $box_class; ?>">
<?php echo strip_tags( sprintf( __( 'Message box size: %1$s of %2$s', 'front-end-pm' ), '<span class="fep_total_message_count">' . number_format_i18n( $total_count ) . '</span>', $max_text ), '<span>' ); ?>
</div>
</div>
<?php do_action( 'fep_header_note', $user_ID ); ?>
</div>
</div>
بالنسبة لأولئك الذين ليسوا على دراية بـ PHP (مثلي) ، فإنها تبدو مثل HTML ولكن مع إدراج <؟ Php ... code ...؟>. تُستخدم هذه الإدخالات لتكوين صفحة HTML اعتمادًا على معلمات مختلفة ، على سبيل المثال ، بيانات المستخدم. أي أن PHP هي مُنشئ صفحة ثابت ، ويتم استخدام JavaScript للتعامل مع الأحداث المعقدة.
لقد قمت بنسخ نمط اللوحة العلوية من المكون الإضافي الأكثر تفصيلاً ، وإزالة المعلومات غير الضرورية حول حجم صندوق البريد ، وتغيير طريقة عرض المعلومات حول الرسائل الجديدة. هذا ما حدث في الكود والشاشة.
<div class="fep-header">
<div class="fep-header-left-side">
<div class="fep-user-page-avatar">
<?php echo get_avatar( $user_ID, 96, '', fep_user_name( $user_ID ) ); ?>
</div>
</div>
<div class="fep-header-right-side">
<div class="fep-header-username">
<?php echo fep_user_name( $user_ID );?>
</div>
<div class="fep-header-top-info">
<?php
if( $unread_count == 0 && $unread_ann_count == 0 )
{
echo sprintf( __(' .', 'front-end-pm'));
}else{
if( $unread_count != 0 )
echo sprintf( __(' : %d<br>', 'front-end-pm'), $unread_count);
if( $unread_ann_count != 0 )
echo sprintf( __(' : %d', 'front-end-pm'), $unread_ann_count);
}
?>
</div>
</div>
<?php do_action( 'fep_header_note', $user_ID ); ?>
<div class="fep-top-background"></div>
</div>

بطبيعة الحال ، العملية متكررة وليست مريحة للغاية ، لكني استقلت نفسي. ربما هناك طرق أكثر ملاءمة. احفظ الملف (VS Code) ، واستبدل الملف على الخادم (FileZilla) ، وقم بتحديث الصفحة (Firefox DE). ليست هذه هي الحالة الأكثر صعوبة ، لكنها تظهر جوهر العملية. إنه نفس الشيء في المهام الأكثر تعقيدًا - مع التغييرات في الوظائف والفئات ومصفوفات البيانات ، وفي المهام الأبسط - عندما تحتاج فقط إلى تبديل الكتل أو حذف الكتل غير الضرورية.
لكن هذا الأسلوب يجعل عملية التحديث أكثر صعوبة. بعد التحديث ، ربما (لم أفعل ذلك طالما أنه يعمل وفقًا لمبدأ "إنه يعمل وجيد") ، سيتعين عليك إعادة إجراء التعديلات. ربما هذا هو العيب الرئيسي.
4. الأداء
الفسفور الابيض ليس حول السرعة. لنكون صادقين ، محاولات تحسين سرعة التنزيل لم تؤد إلى زيادة كبيرة ، لكنها أدت إلى عطل. لقد استخدمت المكوّن الإضافي Asset CleanUp لإزالة تحميل CSS / JS غير الضروري ، لكنني لم ألاحظ زيادة ملحوظة في سرعة التحميل (نظرت إلى GTmetrix ) ، لكنني لاحظت أن بعض المكونات الإضافية تتسلق على جميع الصفحات ، بغض النظر عما إذا كانت مستخدمة هناك أم لا. في النهاية ، أوقفته. ثم حاولت W3 Total Cacheللتخزين المؤقت للصفحات على الخادم - عندما لا يتم إنشاء الصفحة باستخدام PHP ، ولكن يتم تحميل نسخة جاهزة (يتم تحديثها دوريًا). ولكن مع تعطل موقع الويب الخاص بي ، ثم رأيت أيضًا أن الإعداد الموصى به ليس التخزين المؤقت للصفحات للمستخدمين الذين قاموا بتسجيل الدخول ، أصبح من الواضح أن التخزين المؤقت للصفحات في حالتي يصعب إعداده. لقد تركت التخزين المؤقت الجزئي فقط لأجزاء من التعليمات البرمجية ، وسأكتشفها أكثر (في بعض الأحيان يتعين عليك الآن إعادة تعيين ذاكرة التخزين المؤقت لتفعيل التغييرات على إعدادات البرنامج المساعد).
بشكل عام ، أعتقد أنه في بعض الحالات يعمل بشكل رائع ، لكنه لم يساعدني في الخروج من الصندوق على الفور. بقدر ما أفهم ، يحتوي WP Rocket المدفوع على خيار تخزين مؤقت لكل مستخدم ، وربما سأحاول ذلك لاحقًا.
5. الأمن
في وقت من الأوقات في المعهد درس تخصص "أمن المعلومات". على الرغم من أنه بدأ بعد التخرج في دراسة الإلكترونيات ، إلا أن التشوه المهني بقي. أن الإنترنت متسرب من الناحية الأمنية. أستطيع أن أتخيل عدد نقاط الضعف الموجودة في الفسفور الابيض ببنيتها المتكدسة. لا يمكن تصحيح الجميع ، لكنني فعلت أبسط الأشياء على خطى هذه التعليمات وقمت بتثبيت Wordfence - دعنا نرى ما إذا كان الأداء لا يعاني كثيرًا ، يمكنك تركه.
6. الإضافات
6.1 إدارة الوصول والمستخدم
لحل المشكلة ، اخترت المكون الإضافي Ultimate Membership Pro (41 دولارًا). هناك دروس فيديو منفصلة عن ذلك - هنا. اضطررت إلى العبث ، الكثير من الإعدادات ، لكنني لن أكتب عن كل شيء بالتفصيل ، إذا كان لدي أي أسئلة ، فسأجيب في التعليقات أو في الرسائل الخاصة. سأخبرك فقط عن طرق التحكم في الوصول.
بشكل أساسي ، هناك العديد من الأدوار في النظام (والتي تم تصميمها في الأصل للمدونات) ، وتعمل العديد من المكونات الإضافية معها ، وتتحكم في القدرات اعتمادًا على الدور. يتم تعيين الدور الافتراضي في "الإعدادات> عام".

يضيف المكون الإضافي لإدارة الاشتراك طبقة أخرى - مستوى الاشتراك ، والتي يمكنك وفقًا لها التحكم في الوصول إلى المحتوى وعرضه لكل صفحة ، بما في ذلك عرض عناصر القائمة. أيضًا ، يتم تقسيم المستخدمين إلى مسجلين وغير مسجلين - وهذه طريقة أخرى لفصل عرض المحتوى.
البرنامج المساعد لا يخلو من العيوب ، لكنه يقوم بعمله. هناك العديد من الإعدادات ، ولكن هناك مقاطع فيديو تدريبية ، يمكنك اكتشافها ، والدعم الفني ، إن وجد ، سيدعمك ويخبرك.
6.2 قاعدة المعرفة
في البداية ، وضعت الكتاب على المنصة باستخدام البرنامج المساعد عارض pdf ، ولكن لا توجد طريقة لإنشاء روابط للمادة ، و pdf ليس الخيار الأكثر مرونة للعرض. رفض وقرر الذهاب إلى قاعدة المعرفة. سأطلق على المكون الإضافي Echo Knowledge Base ، إنه جيد حقًا. ولكن بالنسبة لعرض pdf - لا يسعني إلا أن أذكر المكون الإضافي Flowpaper ، إنه جميل جدًا ، وربما يكون مفيدًا لشخص ما.
6.3 التصويت
لقد أحببت البرنامج المساعد Yop Poll - مرة أخرى ، هناك كل ما تحتاجه ، كل الإعدادات ، حتى المظهر جيد جدًا في الإصدار المجاني.
7. ما الذي لم ينجح
تحتاج المدونة الجماعية إلى قدرة المستخدمين على إنشاء منشورات. الاختيار ليس رائعًا - المكون الإضافي User Submitter Posts (يوجد أيضًا مثل هذا البرنامج المدفوع). حتى أنني اشتريت نسخته المدفوعة ، لكنها قتلت نموذج التفويض الخاص بي ، وتعارض مع المكون الإضافي لإدارة الاشتراك - لقد أعدت المال ، ولم يحل المطور المشكلة ، وألقى باللوم على المكونات الإضافية الأخرى. ولكن هذا ليس نقطة. لا يوفر نموذج إنشاء المنشور فرصة لتحميل الصور وإدراجها في المنشور.

بدأ التعامل مع الحقوق ، وكان من المفيد ، تثبيت البرنامج المساعد مفيد محرر دور المستخدم . لذلك اتضح أنه يتم تحميل الصورة فقط عندما يتم منح المستخدم الحق في تحرير جميع الصفحات. القصدير ممتلئ ، بالطبع ، معطل ، بينما يمكنك فقط وضع رابط URL للصور. تكمن المشكلة هنا في أن المنشور غير موجود بعد وأن WP ينظر في إضافة صورة كتحرير للصفحة التي تحتوي على نموذج إنشاء المنشور. ربما سيخبرك شخص ما بكيفية حل هذه المكونات؟
8. الخلاصة
جعلت WP من الممكن إنشاء مشروع تجريبي لمنصة مع ليس أبسط وظائف بأقل تكلفة. لقد حل مشكلته من خلال إنشاء نقطة انطلاق لمزيد من التطوير. إذا كانت لديك أسئلة إضافية حول محتوى المنشور ، فسيسعدني مشاركة تجربتي. سأكون ممتنًا أيضًا لتعليقات وتوصيات المتخصصين (لتحسين الأداء - هل هناك حاجة فعلية لشبكة CDN مثل CloudFlare ، أو WP Rocket مدفوعة الأجر ، أو استضافة متخصصة مثل WP Engine ، أو Wordfence).
حظا موفقا للجميع!