برمجة ووردبريس
Search
Close this search box.
كاملة العرض

5 طرق لتعلم كيفية إنشاء صفحة كاملة العرض في ووردبريس

هل تريد إنشاء صفحة كاملة العرض في ووردبريس ، حتى تتمكن من توسيع المحتوى الخاص بك عبر الشاشة؟

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

كما يمكنك الاطلاع على كيفية تكرار صفحة في ووردبريس

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

create full width page 550x340 1

فيما يلي 5 طرق لإنشاء صفحة كاملة العرض:

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

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

غالبًا ما تأتي أفضل قوالب ووردبريس المجانية بقالب كامل العرض ، لذلك هناك فرصة جيدة لامتلاك واحد بالفعل.

أولاً ، تحتاج إلى تحرير صفحة أو إنشاء صفحة جديدة بالانتقال إلى Pages » Add New في لوحة معلومات ووردبريس الخاصة بك.

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

page attributes in wordpress
عرض قسم “سمات الصفحة” في جزء “المستند” في ووردبريس

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

select page template full width
حدد قالب العرض الكامل من القائمة المنسدلة “النموذج”

ستختلف الخيارات التي تراها هنا وفقًا لموضوعك. لا تقلق إذا لم يكن القالب الخاص بك يحتوي على قالب صفحة كامل العرض.

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

الطريقة الثانية: إنشاء قالب صفحة عرض كامل باستخدام الإضافات

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

أولاً ، تحتاج إلى تثبيت وتفعيل الإضافات Fullwidth Templates.

سيضيف الإضافة Fullwidth Templates ثلاثة خيارات جديدة إلى قوالب صفحتك:

select page template full width 1
الخيارات المختلفة المتاحة لقالب صفحتك باستخدام الإضافة Full Width

هذه الخيارات هي:

FW No Sidebar: يزيل الشريط الجانبي من صفحتك ، لكنه يترك كل شيء آخر كما هو
FW Fullwidth: يزيل الشريط الجانبي والعنوان والتعليقات ويمد التخطيط إلى العرض الكامل
FW Fullwidth No Header Footer: يزيل كل ما يفعله FW Fullwidth ، بالإضافة إلى الرأس والتذييل
إذا كنت ستستخدم محرر ووردبريس المدمج ، فمن المحتمل أن يكون “FW No Sidebar” هو الخيار الأفضل.

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

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

الطريقة الثالثة: تصميم صفحة كاملة العرض في ووردبريس باستخدام ملحق Page Builder

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

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

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

أولاً ، قم بتثبيت وتفعيل الإضافة Beaver Builder.

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

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

بعد ذلك ، انقر فوق الزر “Launch Beaver Builder” في منتصف شاشتك.

استخدام المكون الإضافي Beaver Builder لإنشاء صفحة كاملة العرض
استخدام المكون الإضافي Beaver Builder لإنشاء صفحة كاملة العرض

الآن ، استخدم واجهة السحب والإفلات في Beaver Builder لإنشاء صفحتك.

beaver builder interface
واجهة السحب والإفلات في Beaver Builder

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

beaver builder templates
حدد أحد قوالب Beaver Builder

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

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

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

تحرير عنوان باستخدام Beaver Builder
تحرير عنوان باستخدام Beaver Builder

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

beaver builder editing
تحرير تفاصيل عنصر في Beaver Builder

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

إضافة وحدة نمطية في Beaver Builder
إضافة وحدة نمطية في Beaver Builder

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

beaver builder save publish
حفظ أو نشر صفحتك ذات العرض الكامل في Beaver Builder

يمكنك الآن زيارة صفحتك لرؤية صفحتك كاملة العرض النهائية.

الطريقة الرابعة: إنشاء صفحات كاملة العرض مخصصة بالكامل باستخدام SeedProd

بينما يعد Beaver Builder حلاً أنيقًا ، إلا أنه من المحتمل أن يبطئ مدونة ووردبريس الخاصة بك.

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

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

seedprod builder
SeedProd Page Builder

أولاً ، تحتاج إلى تثبيت وتفعيل الإضافة SeedProd. بعد التنشيط ، ما عليك سوى الانتقال إلى SeedProd » Pages لإضافة صفحة مقصودة جديدة.

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

seedprod templates
قوالب SeedProd

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

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

ما عليك سوى الانتقال إلى SeedProd »Theme Builder لإنشاء قالب ووردبريس جديدة. مرة أخرى ، يمكنك الاختيار من بين 28+ قالب قابل للتخصيص أو يمكنك تصميم كل جزء من القالب الخاص بك من البداية.

seedprod woocommerce themes
قوالب SeedProd القابلة للتخصيص لـ woocommerce

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

seedprod full screen background
اضبط الخلفية على العرض الكامل في SeedProd

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

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

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

بعد ذلك ، افتح محرر نص عادي مثل Notepad والصق الكود التالي في ملف فارغ:

<?php
/*
*
Template Name: Full-Width
*/
get_header(); ?>
  • احفظ هذا الملف كملف full-width.php على جهاز الكمبيوتر الخاص بك. قد تحتاج إلى تغيير “حفظ كنوع” إلى “كل الملفات” لتجنب حفظه كملف .txt:
save full width template file
احفظ القالب كامل العرض كملف .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.

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

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

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

select full width template
حدد قالب العرض الكامل الذي قمت بإنشائه من القائمة المنسدلة للقالب

بعد تحديد هذا النموذج ، قم بنشر أو تحديث الصفحة.

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

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

بعد ذلك ، يمكنك ضبط عرضه على 100٪ باستخدام CSS. يمكنك إضافة كود CSS بالانتقال إلى Appearance » Customize والنقر على” CSS إضافي “أسفل الشاشة.

appearance customize additional css
إضافة CSS في مُخصص القوالب

استخدمنا كود CSS التالي في موقع الاختبار الخاص بنا:

.page-template-full-width .content-area {
    width: 100%;
    margin: 0px;
    border: 0px;
    padding: 0px;
}
 
.page-template-full-width .site {
margin:0px;
}


إليك كيفية ظهوره على موقعنا التجريبي باستخدام قالب Twenty Sixteen.

fullwidthpreview
معاينة الصفحة كاملة العرض

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

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

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

أقسام الموقع :

أحتاج مساعدة في :

شراء استضافة

شراء استضافة

كل ما تحتاجه حول شراء استضافة من أية شركة تجده في هذا المقال

اقرأ المزيد
تحميل ووردبريس

تحميل ووردبريس

كل ما تحتاجه حول تحميل منصة ووردبريس وتنصيبها تجده في هذا المقال

اقرأ المزيد

أكثر المقالات قراءةً :

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

مقالات ذات صلة