مدونة مو للمعلوميات: كورس الووردبريس الكامل بالتفصيل الجزء السادس تخصيص القالب وظبط إعداداته

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

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

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

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

وأول ما سنقوم به هو البحث بجوجل عن العبارة " astra child theme " مع تبديل كلمة astra بإسم الثيم الذي قمت بتركيبه وستجد في الغالبية العظمى من القوالب المشهورة وفي نتائج البحث الموقع الرسمي للقالب وشرح مفصل مع مجلد كامل لقالب الشايلد لهذا الثيم وعليك الحذر من الدخول لأي موقع غير موثوق وغير الموقع الرسمي للقالب وتحميل ملف قد يضرك.

وفي حالة قالب أسترا فقد وفروا لنا في موقعهم الرسمي مولد لمجلد القالب شايلد الخاص بثيم أسترا وهو Astra Child Theme Generator وبعد ذلك أنصح بعدم تغيير إسم القالب شايلد والضغط على زرار Advanced Options وهنا يمكنك تعديل بعض بيانات القالب بشكل رسمي وقانوني لتضع لمستك مثل تغير إسم Author لأي إسم تريد مثل إسمك أو إسم شركتك.

كذلك رابط موقعك للخدمات مثلاً بالخانة Author URI ويمكنك كذلك رفع صورة وتعديلها بأي برنامج تعديل صور وليكن كما فعلت بأن أحضرت صورة لقالب أسترا وأضفت عليها كلمة Astra Child لكي يسهل تمييز القالب شايلد عن القالب الأب أو القالب الحقيقي فقط من خلال الصورة.

بعدها نقوم بالضغط على زرار Generate ونقوم بتحميل هذا المجلد والأن لدينا قالب شايلد رسمي من موقع القالب الرسمي موثوق به ونظيف نقوم الأن بالذهاب للموقع والدخول للوحة التحكم ومنها الضغط على القسم المظهر ومنها نقوم بالضغط على زرار أضف قالب جديد ثم نقوم بالضغط على زرار رفع قالب ثم نقوم برفع القالب شايلد الذي قمنا بعمله على الموقع الرسمي للقالب.

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

عليك التأكد من أن القالب شايلد موجود به 3 ملفات هامة وهم functions.php و style.css و index.php هذا غير ملف الصورة وإن لم تجد ملف index.php يمكنك ببساطة عمل ملف فارغ وتغيير إسمه للإسم index.php وبهذا يكون لديك جميع الملفات المهمة والضرورية للقالب شايلد.

الأن وبعد كل ذلك أضمن لك بأنه أي تعديل في أكواد السي إس إس بالقالب شايلد سيظل يعمل مع أي تحديث للقالب الأساسي وسيظل أي تعديل على القالب شايلد يتم تطبيقه على القالب الأساسي وهو ما فعلنا كل ذلك من أجله وهو الشكل الإحترافي لمزيد من الخيارات كما تود بالقالب والأكواد.

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

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

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

لم يبقى إلا تعديل شكل الفاصل والمحاذاة وأخيراً وهي مهمة جداً عليك تعطيل تلك الخاصية من الخيار DISPLAY SETTINGS من الظهور بالصفحة الرئيسية بتعطيل الخيار Enable on Home Page? كذلك تعطيلها بالخيار Enable on Single Page? وهو أمر هام جداً لأنه من غير المنطقي ظهورها بالصفحة الرئيسية والصفحات الفرعية كذلك ومكانها الحقيقي في المقالات فقط.

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

ومن خيار Footer Builder يمكنك تصميم وتعديل أسفل الموقع أو الفوتر الخاص به وهو أمر يحتاج بعض التنسيق حتى يظهر بأفضل شكل ممكن فعليك تحديد مكان الكوبي رايت وأزرار السوشيال ميديا وقائمة الفوتر بالطبع.

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

وبالخيار تنسيقات (CSS) إضافية يمكنك التعديل على أكواد السي إس إس بالقالب بهذا الخيار مع عدم القلق بشأن زوالها بأول تحديث لأن الأكواد ستكون ثابتة بالقالب شايلد فيما يتم تحديث القالب بشكل سليم من القالب الأساسي وهو ما شرحناه بأول المقالة.

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

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

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

والأهم هنا هي القائمة 3 والخاصة بالظهور عند عرض التابلت والموبايل حيث ستختفي أزرار السوشيال ميديا وعليك وضعها بتلك القائمة تحت الصفحات الفرعية فقط بوضعها بالشكل روابط مخصصة من خلال لوحة التحكم من المظهر ثم قوائم ثم تجدها بالخيارات أضف عناصر القائمة حيث يمكنك من خلالها إضافة صفحات أو مقالات وروابط مخصصة أو حتى تصنيفات للقائمة نسقها كما تريد.

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

قائمة شريط التذييل ضع بها وحدد لها القائمة 2 التي قمت بتصميمها لتناسب الفوتر أو أسفل الموقع

وبالخيار Off-Canvas Menu ضع بها القائمة 3 الخاصة بالتابلت والموبايل لتظهر على الموبايل بالشكل كما بالصورة التالية

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

وهي بأن تقوم بالضغط على إضافة Widget وبعدها نقوم بالضغط على شكل الترس بالإضافة ثم علامة زائد كما نرى بالصورة لتظهر لنا إضافات تصميم الصفحات ومنها يمكننا إختيار أي إضافة تناسب ما نريد عمله وتصميمها ثم وضعها بالهيدر أو الفوتر ثم حفظ ونشر.

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

الثاني تركيب إضافة تحفظ بها وتعدل على أكواد سي إس إس

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

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

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

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

كود سي إس إس لجعل موقعك أكثر تفاعل وجمال

figure.wp-block-image.size-large:hover , figure.wp-block-post-featured-image:hover , img.attachment-large.size-large.wp-post-image:hover {opacity:0.8;box-shadow: 5px 5px 15px #cdcdcd;transform:scale(1.04);}
figure.wp-block-image.size-large , figure.wp-block-post-featured-image , div.wp-block-cover__image-background.wp-image-30.has-parallax , span.wp-block-cover__background.has-background-dim , img.attachment-large.size-large.wp-post-image {transition:300ms;border:1px solid #7c7c7c;border-radius:10px;box-shadow: 3px 3px 15px #cdcdcd;animation: growIn 1s 0s linear 1;}
.wp-block-post-featured-image img , figure.wp-block-image.size-large img {transition:300ms;border:1px solid #7c7c7c;border-radius:10px;}
h3.ast-related-post-title.entry-title{transition:300ms;animation: growIn 1s 0s linear 1;}
h3.ast-related-post-title.entry-title:hover{opacity:0.8;transform:scale(1.04);}

.entry-content a , .ast-single-post {text-decoration: none !important;transition:300ms;text-shadow:3px 3px 8px #f0f0f0;}
.entry-content a:hover {transform:scale(1.04); }.crp_related.crp-rounded-thumbs img {border-radius: 10px;}
@-webkit-keyframes growIn { 
    0% { 
        -webkit-transform: scale(0.2); 
        opacity:0;
    } 
    50% { 
        -webkit-transform: scale(1.2); 
        
    } 
    100% { 
        -webkit-transform: scale(1); 
        opacity:1;
    } 
} 
@keyframes growIn { 
    0% { 
        transform: scale(0.2); 
        opacity:0;
    } 
    50% { 
        transform: scale(1.2); 
        
    } 
    100% { 
        transform: scale(1); 
        opacity:1;
    } 
} 
.growIn { 

    -webkit-transform: scale(0.2);
    transform: scale(0.2);
    opacity:0;
}
.growIn.go{
    -webkit-animation-name: growIn; 
    animation-name: growIn; 
}
p.has-text-align-center.has-large-font-size , div.wp-block-button.is-style-outline , h2.wp-block-heading.has-text-align-center{animation: growIn 1s 0s linear 1;}

@-webkit-keyframes tada { 
    0% {-webkit-transform: scale(1);} 
    10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);} 
    30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);} 
    40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);} 
    100% {-webkit-transform: scale(1) rotate(0);} 
} 
@keyframes tada { 
    0% {transform: scale(1);} 
    10%, 20% {transform: scale(0.9) rotate(-3deg);} 
    30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);} 
    40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);} 
    100% {transform: scale(1) rotate(0);} 
} 
.tada.go { 
    -webkit-animation-name: tada; 
    animation-name: tada; 
}
div.ultp-block-image{border: 1px solid #7c7c7c;border-radius: 20px;}

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

الخلاصة

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