كيفية تخصيص الصفحة المقصودة في WordPress الخاصة بالموقع التجاري

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

كيفية إنشاء صفحة مقصودة في WordPress قابلة للتخصيص

يعد إنشاء الصفحات المقصودة عملاً مستهلكًا للوقت من التصميم النظري إلى الترميز. السؤال الذي يطرحه المطورون غالبًا عند إنشاء صفحة مقصودة هو: إذا كان لديك تصميم جاهز، فكيف يمكنك تحويله إلى صفحة مقصودة في WordPress؟

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

استخدام الحقول المخصصة لإنشاء الصفحات المقصودة

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

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

الخطوة الأولى: اختر التصميم

دعونا نبني صفحة رئيسية (أيضًا صفحة مقصودة) بحقول مخصصة. لتوفير الوقت في تصميم (PSD) وتحويله إلى (HTML / CSS)، فلنأخذ تصميمًا مجانيًا رائعًا من أي مكان مختص بالتصميمات مثلاً من (HTML5UP – Spectral).

الخطوة الثانية: تحليل عناصر المحتوى في التصميم

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

• عنوان

• وصف

• ارتباط الزر والنص

• مقدمة

• عنوان

• وصف

• دعوة للعمل (CTA)

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

الخطوة الثالثة: إنشاء نموذج الصفحة للصفحة المقصودة

قبل إنشاء الحقول المخصصة لعناصر الصفحة المقصودة التي حللناها أعلاه، فلنقم بإنشاء نموذج صفحة لهذه الصفحة المقصودة. ما عليك سوى إنشاء ملف باسم (template-home.php) في مجلد السمات بالمحتوى التالي:

<?php/** * Template Name: Homepage Template */get_header(); ?><divid=“primary”class=“content-area”></div><?phpget_footer(); ?>

الأمر بسيط جدًا، تمامًا مثل أي قالب صفحة تراه في (WordPress). حيث أنك هنا نحتفظ بالمحتوى الرئيسي لقالب الصفحة فارغًا (داخل div) لتوضيح المنطق. الخطوة التالية هي إضافة (HTML) من (index.html) إلى علامة div. وها هي النتيجة.

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

الخطوة الرابعة: إنشاء الحقول المخصصة لأقسام الصفحة المقصودة

لإنشاء حقول مخصصة لأقسام الصفحة المقصودة، نستخدم المكوّن الإضافي (Meta Box) وهو مكون إضافي يساعدك في إنشاء حقول مخصصة بسرعة مع العديد من الخيارات. ولإنشاء حقول مخصصة للأقسام، أضف الكود التالي إلى ملف (function.php) للسمة الحالية:

$meta_boxes[] = array( ‘title’ => ‘Section Hero’, ‘post_types’ => ‘page’, ‘fields’ => array( array( ‘id’ => ‘hero_title’, ‘name’ => ‘Title’, ‘type’ => ‘text’, ), array( ‘id’ => ‘hero_desc’, ‘name’ => ‘Description’, ‘type’ => ‘wysiwyg’, ‘options’ => array( ‘teeny’ => true, ‘media_buttons’ => false, ‘quicktags’ => false, ), ), array( ‘id’ => ‘hero_button_link’, ‘name’ => ‘Button Link’, ‘type’ => ‘text’, ), array( ‘id’ => ‘hero_button_text’, ‘name’ => ‘Button Text’, ‘type’ => ‘text’, ), ), );

خدمات القسم

$meta_boxes[] = array( ‘title’ => ‘Section Services’, ‘post_types’ => ‘page’, ‘fields’ => array( array( ‘type’ => ‘group’, ‘id’ => ‘services’, ‘clone’ => true, ‘fields’ => array( array( ‘id’ => ‘image’, ‘name’ => ‘Image’, ‘type’ => ‘image_advanced’, ‘max_file_uploads’ => 1, ), array( ‘id’ => ‘title’, ‘name’ => ‘Title’, ‘type’ => ‘text’, ), array( ‘id’ => ‘desc’, ‘name’ => ‘Description’, ‘type’ => ‘text’, ), array( ‘id’ => ‘image_style’, ‘name’ => ‘Image Style’, ‘type’ => ‘radio’, ‘options’ => array( ‘left’ => ‘Left’, ‘right’ => ‘Right’, ), ), ), ), ), );

في هذا القسم، نستخدم ملحق (Meta Box Group) لتجميع الحقول ذات الصلة لخدمة ما في حقل واحد (مجموعة). يساعدنا ذلك على تنظيم البيانات بشكل أفضل. نستخدم أيضًا ميزة النسخ لإضافة العديد من الخدمات كما نريد. بعد إضافة الكود إلى ملف (jobs.php).

الخطوة الخامسة: احصل على البيانات واعرضها على نموذج الصفحة المقصودة

الخطوة الأخيرة هي الحصول على بيانات الحقول المخصصة وعرضها في الواجهة الأمامية. وللقيام بذلك، ما عليك سوى استبدال النص المشفر أو عرض الصورة في ملف template-home.php بالوظائف المساعدة rwmb_the_value () أو rwmb_meta ().

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

<section id=”banner”>
<div class=”inner”>
<h2><?php rwmb_the_value( ‘hero_title’ ); ?></h2>
<?php rwmb_the_value( ‘hero_desc’ ); ?>
<ul class=”actions”>
<li><a href=”<?php rwmb_the_value( ‘hero_button_link’ ); ?>” class=”button special”><?php rwmb_the_value( ‘hero_button_text’ ); ?></a></li>
</ul>
</div>
<a href=”#one” class=”more scrolly”>Learn More</a>
</section>

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

• اختيار تصميمًا وقم بتحويله إلى HTML / CSS.

• تحليل العناصر في التصميم وتحديد العناصر القابلة للتحرير.

• القيام بإنشاء قالب صفحة بناءً على ملف HTML.

• القيام بإنشاء حقول مخصصة للعناصر القابلة للتحرير.

• الحصول على بيانات الحقول المخصصة واعرضها في قالب الصفحة المقصودة.

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