خطوات سهلة لترميز صفحة هبوط مخصصة لـ WordPress

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

أهمية الصفحة المقصودة

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

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

ترميز صفحة هبوط مخصصة لـ WordPress

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

إنشاء موضوع فرعي

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

قم بإنشاء ملف Style.css

في ملف style.css ، تحتاج ببساطة إلى إضافة الكود التالي:

/ *

اسم الموضوع: موضوع الصفحة المقصودة

الوصف: موضوع الطفل مع صفحة مقصودة مخصصة

المؤلف: الكاتب الافتراضي

عنوان URI للمؤلف: https://www.wpfullcare.com

* /

قم بإنشاء ملف Functions.php

في ملف jobs.php ، تحتاج إلى إضافة الكود التالي. سيسمح لك القيام بذلك بتسجيل ملف ورقة أنماط الطفل.

<؟ php

// أنماط موضوع الأصل //

// https://codex.wordpress.org/Child_Themes //

وظيفة theme_enqueue_styles () {

$ parent_style = 'أسلوب الوالدين'؛

wp_enqueue_style ($ parent_style، get_template_directory_uri (). '/style.css')؛

wp_enqueue_style ("نمط الطفل"،

get_stylesheet_directory_uri (). "/style.css"،

مجموعة (parent_style $)

) ؛

}

add_action ('wp_enqueue_scripts'، 'theme_enqueue_styles') ؛

تثبيت وتنشيط موضوع الطفل الخاص بك

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

بناء صفحة مخصصة

إذا كان كل شيء على ما يرام ، يمكنك المتابعة لإنشاء صفحة مخصصة في نسق الطفل الخاص بك. للقيام بذلك ، تحتاج إلى إنشاء ملف جديد في موضوع طفلك. بمجرد القيام بذلك ، احفظه كـ page-landing.php. في هذا الملف تحتاج إلى إضافة الكود التالي:

<؟ php

/ **

اسم النموذج: الصفحة المقصودة

** /

؟>

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

<div id = ”Landing-page” class = ”hfeed site”>

<div class = ”site-branding”>

<p class = ”site-title aligncenter”> <a href = ”<؟ php echo esc_url (home_url ('/')) ؛ ؟> ”rel =” home ”> <؟ php bloginfo ('name')؛ ؟> </a> </p>

</div> <! - .site-branding ->

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

عرض المحتوى

لعرض باقي المحتوى على صفحتك المقصودة ، يلزمك إضافة الترميز التالي إلى page-landing.php. تحتاج إلى القيام بذلك أسفل سطر <! - .site-branding -> مباشرةً حتى يعمل بشكل صحيح.

<div class = ”sidebar sidebar-bribe”>

<؟ php if (have_posts ()):؟>

<؟ php while (have_posts ()): the_post ()؛ ؟>

<h1 class = ”Land-title”> <؟ php the_title (”)؛ ؟> </h1>

<؟ php the_content ()؛ ؟>

<! - https://codex.wordpress.org/Function_Reference/wp_link_pages ->

<؟ php end while؛ ؟>

<؟ php endif؛ ؟> <! - mdl-cell-8 // # Primary ->

</div>

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