لقد تلقيت عددًا قليلاً من الطلبات التي تسألني عن كيفية تغيير حجم Nivo و Content Sliders في Classy WordPress Theme ، لذلك قررت أن أقوم بعمل برنامج تعليمي هنا يوضح لك جميع الخطوات المتضمنة في تغيير حجم الصورة المميزة و CSS و حتى تتمكن من تحديد حجم شريط التمرير الخاص بك.
الخطوة 1: تغيير حجم الصورة المميز في Functions.php
أول شيء تريد القيام به هو تغيير حجم صورة شريط التمرير الخاصة بك كما هو محدد في function.php بحيث يتم اقتصاصها بشكل صحيح عند تحميلها إلى مكتبة الوسائط الخاصة بك.
* افتح function.php وقم بتغيير السطر 122
add_image_size ('nivo-slider'، [light] 980 [/ lightning]، [light] 400 [/ light]، true)؛
* القيمة الأولى 980 هي عرض صورة شريط التمرير و 400 هي ارتفاع الصورة المنزلق. قم بتغيير هذه لتناسب احتياجاتك.
الخطوة 2: قم بتحرير ملف CSS الخاص بك
التالي هو تحرير CSS لتغيير ارتفاع الحاوية لشريط التمرير.
ملاحظة : ما عليك سوى القيام بذلك لـ “NivoSlider” لأن شريط تمرير المحتوى سيغير الارتفاع بناءً على محتواه تلقائيًا.
* افتح style.css وقم بتغيير قيمة الارتفاع بين السطور 1132-1140
#slider_nivo {
position: relative;
[highlight]width: 980px;[/highlight]
margin-top: -30px;
margin-left: -25px;
margin-right: -25px;
margin-bottom: 30px;
[highlight]height: 400px;[/highlight]
overflow: hidden;
}
الخطوة 3: قم بتحرير ملفات القوالب الخاصة بك
الخطوة التالية هي تحرير ملفات القالب الخاصة بك بحيث تتوافق الشفرة مع الأبعاد الجديدة.
أ. تغيير Nivo Image Slider: Open include / sliders / nivo.php وبين السطور (32-36) تغير قيم صورتك لتعكس أبعادك الجديدة.
<a href="<?php echo $slidelink ?>" title="<?php the_title(); ?>"><img src="<?php echo $featured_image[0]; ?>" alt="<?php the_title(); ?>" <?php if($options['disable_caption'] != 'disable') { ?>title="<?php the_title(); ?>"<?php } ?> [highlight]width="980" height="400"[/highlight] /></a>
<?php
// no meta link defined, show plain img
} else { ?>
<img src="<?php echo $featured_image[0]; ?>" alt="<?php the_title(); ?>" <?php if($options['disable_caption'] != 'disable') { ?>title="<?php the_title(); ?>"<?php } ?> [highlight]width="980" height="400"[/highlight] />
ب. تغيير شريط تمرير المحتوى لشرائح الصور: يتضمن الفتح / sliders / content.php وبين السطور (29-36) تغيير قيم صورتك لتعكس أبعادك الجديدة.
<a href="<?php echo $slidelink ?>" title="<?php the_title(); ?>"><img src="<?php echo $featured_image[0]; ?>" alt="<?php the_title(); ?>" [highlight]width="980" height="400"[/highlight] /></a>
</div>
<!-- END .slide-image -->
<?php
// no meta link defined, show plain img
} else { ?>
<div>
<img src="<?php echo $featured_image[0]; ?>" alt="<?php the_title(); ?>" [highlight]width="980" height="400"[/highlight] />
الخطوة 4: إعادة إنشاء صورك (فقط إذا كنت بحاجة إلى إعادة اقتصاص صورك)
تذكر في الخطوة 1 قمنا بتغيير حجم صورة شريط التمرير في function.php؟ حسنًا ، هذه هي القيمة التي يستخدمها WordPress لاقتصاص صورك عند تحميلها ، لذا إذا كان لديك أي صور موجودة بالفعل في مكتبة الوسائط الخاصة بك ، فستحتاج إلى “إعادة إنشائها” لتعكس تغييراتك.