هل ترغب في إنشاء صفحة كاملة العرض في ووردبريس ، حتى تتمكن من توسيع المحتوى الخاص بك عبر الشاشة؟
تأتي معظم سمات ووردبريس بالفعل مع قالب صفحة مدمج كامل العرض يمكنك استخدامه. ومع ذلك ، إذا لم يكن المظهر الخاص بك يحتوي على واحد ، فمن السهل إضافته.
في هذه المقالة ، سنوضح لك كيفية إنشاء صفحة كاملة العرض بسهولة في ووردبريس وحتى إنشاء تخطيطات صفحة مخصصة بالكامل بدون أي كود.
كيفية إنشاء صفحة كاملة العرض في ووردبريس
إذا كان المظهر الخاص بك يأتي بالفعل مع قالب صفحة كامل العرض ، فمن الأفضل استخدامه ببساطة. تقريبًا جميع سمات ووردبريس الجيدة تفعل ذلك.
حتى أفضل وورد المواضيع الحرة وغالبا ما تأتي مع قالب العرض الكامل، لذلك هناك فرصة جيدة لديك بالفعل واحدة.
أولاً ، تحتاج إلى تحرير صفحة أو إنشاء صفحة جديدة بالانتقال إلى الصفحات »إضافة جديد في لوحة معلومات ووردبريس الخاصة بك.
في الجزء الأيمن من “المستند” من محرر المحتوى ، تحتاج إلى توسيع قسم “سمات الصفحة” بالنقر فوق السهم المتجه لأسفل بجواره. سترى بعد ذلك القائمة المنسدلة “نموذج”.
عرض قسم “سمات الصفحة” في جزء “المستند” في ووردبريس
إذا كان لديك قالب كامل العرض لموضوعك ، فسيتم إدراجه هنا. يجب أن يطلق عليه شيء مثل “قالب العرض الكامل”:
حدد قالب العرض الكامل من القائمة المنسدلة “النموذج”
ستختلف الخيارات التي تراها هنا وفقًا لموضوعك. لا تقلق إذا لم يكن قالبك يحتوي على قالب صفحة كامل العرض.
يمكنك بسهولة إضافة واحدة باستخدام الطرق أدناه.
هذه الطريقة هي الأسهل وتعمل مع جميع سمات ووردبريس وإضافات أداة إنشاء الصفحات.
أولاً ، تحتاج إلى تثبيت وتفعيل المكون الإضافي Fullwidth Templates . إذا لم تكن متأكدًا من كيفية القيام بذلك ، فراجع دليل المبتدئين لدينا لتثبيت مكون ووردبريس الإضافي .
سيضيف المكون الإضافي Fullwidth Templates ثلاثة خيارات جديدة إلى قوالب صفحتك:
الخيارات المختلفة المتاحة لقالب صفحتك باستخدام البرنامج المساعد Full Width
هذه الخيارات هي:
FW No Sidebar: يزيل الشريط الجانبي من صفحتك ، لكنه يترك كل شيء آخر كما هو
FW Fullwidth: يزيل الشريط الجانبي والعنوان والتعليقات ويمد التخطيط إلى العرض الكامل
FW Fullwidth No Header Footer: يزيل كل ما يفعله FW Fullwidth ، بالإضافة إلى الرأس والتذييل
إذا كنت ستستخدم محرر ووردبريس المدمج ، فمن المحتمل أن يكون “FW No Sidebar” هو الخيار الأفضل.
بينما يتيح لك هذا المكون الإضافي إنشاء قالب صفحة كامل العرض ، إلا أن خيارات التخصيص محدودة.
إذا كنت ترغب في تخصيص قالب العرض الكامل الخاص بك دون أي تعليمات برمجية ، فأنت بحاجة إلى استخدام أداة إنشاء الصفحات.
إذا لم يكن القالب الخاص بك يحتوي على قالب كامل العرض ، فهذه هي أسهل طريقة لإنشاء قالب كامل العرض وتخصيصه.
يسمح لك بتحرير صفحة العرض الكامل الخاصة بك بسهولة وإنشاء تخطيطات مختلفة للصفحة لموقع الويب الخاص بك باستخدام واجهة السحب والإفلات.
لهذه الطريقة ، ستحتاج إلى مكون إضافي منشئ صفحات ووردبريس . في هذا البرنامج التعليمي ، سنستخدم Beaver Builder . إنها واحدة من أفضل المكونات الإضافية لإنشاء صفحات السحب والإفلات ، وتتيح لك إنشاء تخطيطات الصفحة بسهولة دون كتابة أي رمز.
أولاً ، قم بتثبيت وتفعيل المكون الإضافي Beaver Builder . لمزيد من التفاصيل ، راجع دليلنا خطوة بخطوة حول كيفية تثبيت مكون ووردبريس الإضافي .
بمجرد تنشيطه ، قم إما بتحرير صفحة موجودة أو إنشاء صفحة جديدة.
في جزء “المستند” على الجانب الأيمن من الشاشة ، انتقل إلى “سمات الصفحة” وحدد قالبًا بالعرض الكامل من القائمة المنسدلة.
بعد ذلك ، انقر فوق الزر “Launch Beaver Builder ” في منتصف شاشتك.
استخدام المكون الإضافي Beaver Builder لإنشاء صفحة كاملة العرض
الآن ، استخدم واجهة السحب والإفلات في Beaver Builder لإنشاء صفحتك.
واجهة السحب والإفلات في Beaver Builder
طريقة جيدة للبدء هي عن طريق النقر فوق علامة التبويب القوالب في الأعلى. حدد أحد القوالب المعدة مسبقًا لاستخدامها كأساس لصفحة العرض الكاملة الخاصة بك.
حدد أحد قوالب Beaver Builder
انقر فوق قالب لتحديده وسيقوم مصمم الصفحة بتحميله. يمكنك بعد ذلك تحرير أي عنصر تريد تغييره ، مثل الصور.
تم تصميم تخطيطات Beaver Builder باستخدام صفوف ووحدات نمطية. يمكن أن يحتوي كل صف على أعمدة متعددة وداخل كل صف يمكنك إضافة وحدات محتوى وعناصر واجهة مستخدم.
لتحرير صف أو وحدة في التخطيط ، ما عليك سوى النقر فوقه. في هذه الحالة ، نقوم بتحرير وحدة العنوان:
تحرير عنوان باستخدام Beaver Builder
سيفتح Beaver Builder تفاصيل العنصر في نافذة منبثقة حيث يمكنك تعديل إعداداته. يمكنك تغيير النص وتغيير الخطوط والألوان وإضافة صور الخلفية أو تغييرها والمزيد.
تحرير تفاصيل عنصر في Beaver Builder
يمكنك إضافة وحدات وعناصر واجهة مستخدم في أي وقت إلى التخطيط الخاص بك. يأتي Beaver Builder مع العديد من وحدات المحتوى الأساسية والمتقدمة التي يمكنك سحبها وإفلاتها في صفحتك.
إضافة وحدة نمطية في Beaver Builder
بمجرد الانتهاء من التحرير ، انقر فوق “تم” في الجزء العلوي من الصفحة. يمكنك بعد ذلك حفظ مسودتك أو نشرها.
حفظ أو نشر صفحتك ذات العرض الكامل في Beaver Builder
يمكنك الآن زيارة صفحتك لرؤية صفحتك كاملة العرض النهائية.
بينما يعد Beaver Builder حلاً أنيقًا ، إلا أنه من المحتمل أن يبطئ موقع الويب الخاص بك.
إذا كنت تبحث عن إنشاء صفحة مقصودة مخصصة تمامًا حيث تريد تخصيص رأس الصفحة وتذييلها وجميع مناطق الصفحة ، فإننا نوصي باستخدام SeedProd .
إنه أفضل مكون إضافي للصفحة المقصودة لـ ووردبريس ، وهو يأتي مع واجهة إنشاء صفحات السحب والإفلات سهلة الاستخدام للغاية.
SeedProd Page Builder
أولاً ، تحتاج إلى تثبيت وتفعيل المكون الإضافي SeedProd .
بعد التنشيط ، ما عليك سوى الانتقال إلى SeedProd »صفحات لإضافة صفحة مقصودة جديدة. يمكنك ببساطة الاختيار من بين العديد من القوالب الجاهزة أو إنشاء صفحة مقصودة مخصصة من البداية.
أفضل جزء في SeedProd هو أنه سريع للغاية ، ويأتي مع ميزات تحويل مضمنة لإدارة المشتركين ، وتكامل خدمة التسويق عبر البريد الإلكتروني ، والمزيد.
هذه الطريقة هي الملاذ الأخير إذا لم تعمل أي من الطرق المذكورة أعلاه من أجلك. يتطلب منك تعديل ملفات سمة ووردبريس الخاصة بك. ستحتاج إلى بعض الفهم الأساسي لـ PHP و CSS و HTML.
إذا لم تكن قد قمت بذلك من قبل ، فقم بإلقاء نظرة على دليلنا حول كيفية نسخ / لصق التعليمات البرمجية في ووردبريس .
قبل المضي قدمًا ، نوصي بإنشاء نسخة احتياطية من ووردبريس أو على الأقل نسخة احتياطية من المظهر الحالي الخاص بك. سيساعدك هذا في استعادة موقعك بسهولة إذا حدث خطأ ما.
بعد ذلك ، افتح محرر نص عادي مثل Notepad والصق الكود التالي في ملف فارغ:
<?php
/*
*
Template Name: Full-Width
*/
get_header(); ?>احفظ هذا الملف full-width.phpعلى جهاز الكمبيوتر الخاص بك. قد تحتاج إلى تغيير “حفظ كنوع” إلى “كل الملفات” لتجنب حفظه كملف .txt:
احفظ القالب كامل العرض كملف .php
يحدد هذا الرمز ببساطة اسم ملف القالب ويطلب من ووردبريس إحضار قالب الرأس.
بعد ذلك ، ستحتاج إلى جزء المحتوى من الكود. اتصل بموقعك على الويب باستخدام عميل FTP (أو مدير ملفات استضافة ووردبريس في cPanel) ثم انتقل إلى / wp-content / theme / your-theme-folder /.
أنت الآن بحاجة إلى تحديد موقع الملف page.php. هذا هو ملف قالب الصفحة الافتراضي لموضوعك.
افتح هذا الملف وانسخ كل شيء بعد get_header()السطر والصقه في ملف full-width.php على جهاز الكمبيوتر الخاص بك.
في full-width.phpالملف ، ابحث عن هذا السطر من التعليمات البرمجية واحذفه:
<?php get_sidebar(); ?> يجلب هذا الخط الشريط الجانبي ويعرضه في المظهر الخاص بك. سيؤدي حذفه إلى إيقاف المظهر الخاص بك من إظهار الشريط الجانبي عند استخدام قالب العرض الكامل.
قد ترى هذا السطر أكثر من مرة في المظهر الخاص بك. إذا كان المظهر الخاص بك يحتوي على أشرطة جانبية متعددة (تسمى مناطق عناصر واجهة مستخدم التذييل أيضًا أشرطة جانبية) ، فسترى كل شريط جانبي مشار إليه مرة واحدة في الكود. حدد الأشرطة الجانبية التي تريد الاحتفاظ بها.
إذا كان المظهر الخاص بك لا يعرض أشرطة جانبية على الصفحات ، فقد لا تجد هذا الرمز في ملفك.
إليك كيفية ظهور رمز full-width.php بالكامل بعد إجراء التغييرات. قد تبدو التعليمات البرمجية الخاصة بك مختلفة قليلاً حسب الموضوع الخاص بك.
<?php
/*
*
Template Name: Full Width
*/
get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php
// Start the loop.
while ( have_posts() ) :
the_post();
// Include the page content template.
get_template_part( 'template-parts/content', 'page' );
// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) {
comments_template();
}
// End of the loop.
endwhile;
?>
</main><!-- .site-main -->
<?php get_sidebar( 'content-bottom' ); ?>
</div><!-- .content-area -->
<?php get_footer(); ?>بعد ذلك ، قم بتحميل full-width.phpالملف إلى مجلد السمة الخاص بك باستخدام عميل FTP الخاص بك.
لقد نجحت الآن في إنشاء وتحميل قالب مخصص لصفحة العرض الكامل إلى قالبك. الخطوة التالية هي استخدام هذا القالب لإنشاء صفحة كاملة العرض.
توجه إلى منطقة إدارة ووردبريس الخاصة بك وقم بتحرير أو إنشاء صفحة جديدة في محرر قوالب ووردبريس .
في جزء “المستند” على اليسار ، ابحث عن “سمات الصفحة” وانقر على السهم المتجه لأسفل لتوسيع هذا القسم إذا لزم الأمر. من المفترض أن ترى القائمة المنسدلة “نموذج” حيث يمكنك تحديد نموذج “العرض الكامل” الجديد الخاص بك:
حدد قالب العرض الكامل الذي قمت بإنشائه من القائمة المنسدلة للقالب
بعد تحديد هذا النموذج ، قم بنشر أو تحديث الصفحة.
عند عرض الصفحة ، ستلاحظ اختفاء الأشرطة الجانبية ، وستظهر صفحتك كعمود واحد. قد لا يكون العرض كاملًا بعد ، لكنك الآن جاهز لتصميمه بشكل مختلف.
ستحتاج إلى استخدام أداة الفحص لمعرفة فئات CSS المستخدمة بواسطة قالبك لتحديد منطقة المحتوى.
بعد ذلك يمكنك ضبط عرضه على 100٪ باستخدام CSS. يمكنك إضافة كود CSS بالانتقال إلى المظهر »تخصيص والنقر على” CSS إضافي “أسفل الشاشة.
إضافة CSS في مُخصص القوالب
استخدمنا كود CSS التالي في موقع الاختبار الخاص بنا:
1
2
3
4
5
6
7
8
9
10
.page-template-full-width .content-area {
width: 100%;
margin: 0px;
border: 0px;
padding: 0px;
}
.page-template-full-width .site {
margin:0px;
}
إليك كيفية ظهوره على موقعنا التجريبي باستخدام سمة Twenty Sixteen.
معاينة الصفحة كاملة العرض
إذا كنت تريد استخدام الطريقة اليدوية وتريد إجراء المزيد من التخصيصات ، فيمكنك أيضًا استخدام المكون الإضافي CSS Hero الذي يتيح لك تعديل أنماط CSS باستخدام محرر التأشير والنقر.
ومع ذلك ، بالنسبة لمعظم المستخدمين ، نوصي باستخدام قالب العرض الكامل للقالب الخاص بك ، أو استخدام مكون إضافي لإنشاء واحد.
نأمل أن تساعدك هذه المقالة في تعلم كيفية إنشاء صفحة كاملة العرض بسهولة في ووردبريس. قد ترغب أيضًا في الاطلاع على دليلنا حول أفضل مكونات ووردبريس الإضافية لتنمية موقع الويب الخاص بك ، ومقارنتنا لأفضل مكونات ووردبريس LMS لإنشاء الدورات التدريبية وبيعها.
نأمل أن تساعدك هذه المقالة في تعلم كيفية تغيير نظام ألوان الادمن في الووردبريس. قد ترغب أيضًا في رؤية مختارات حول الإضافات (بلجن) في الووردبريس ودليلنا حول كيفية اختيار أفضل شركات حجز النطاقات والاستضافات وكيفية التعامل معها.
إذا أعجبك هذا المقال ، فيرجى الاشتراك في قناتنا على اليوتيوب لدروس فيديو في الووردبريس. ويمكنك أيضًا أن تجدنا على فيسبوك وتويتير وانستجرام وتيكتوك، لطفاً لا تنسى متابعتنا، فنحن نسعد برؤيتك..
