مشکل فاصله عکس ها و پاراگراف ها در وردپرس

حل شده 

PHP

توسط nex در 1 سال پیش
3 35.2k 2 1 سال پیش
nex digisys mehdigm kingblogg
0

سلام دوستان وقت بخیر در قسمت ادامه مطلب وقتی میخوام به پاراگراف ها بگم که از چپ و راست پدینگ بگیرن و کوچکتر از مقدار عکس باشن خود اون عکس هم مثل پاراگراف ها پدینگ میگیره با اینکه من فقط به تگ p پدینگ چپ و راست دادم که کدهاشو براتون میزارم. این برا پاراگراف ها

.article-entry p {
    line-height: 40px;
    padding: 10px 120px;
}

این یکی هم برا خود عکس هایی که داخل پست قرار میگیرن

.article-entry img {
    width: 100%;
    height: auto;
    margin: 5px 0;
    padding: 0;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

و اینم از کدهای صفحه single.php

<div class="container article-content">
        <?php if (have_posts()) : ?>
            <div class="row">
                <?php while (have_posts()) : the_post(); ?>
                    <div class="col-12">
                        <div class="article-entry"><?php the_content(); ?></div>
                    </div>
                <?php endwhile; ?>
            </div>
        <?php endif; ?>
    </div>

خب اینم عکس قسمت مشکل ساز که هم عکس و هم پاراگراف اومدن و از چپ و راست padding:120px گرفتن که من میخوام فقط پاراگراف ها اینجوری باشن و فاصله داشته باشن. دقت کنید اون قسمت بعدی چون ol هست مشکلی نداره ولی عکس با تگ p مشکل ساز شدن.

پاسخ ها

2

چرا میخواین به تگ p همچین خاصیتی بدین ؟؟ معمولا در وردپرس ساختار تگ ها ، دیزان و چینش هر پست ، از ادیتور متن اون گرفته میشه و استایل نویسی به این صورت در آینده نویسنده های وب سایت شما رو با مشکل مواجه می کنه.

راه حل : --میتوانید یک کلاس تعریف کنید و خاصیت های مورد نیاز خودتون رو به اون کلاس بدید و از قسمت Source ادیتور ، اون کلاس رو به تگ های مورد نظرتون اضافه کنید. --یا اینکه بازم از طریق Source استایل های inline به تگ های مورد نظرتون اضافه کنید.

--به صورت حرفه ای تر میتوانید ادیتور وردپرس را شخصی سازی کنید تا خاصیت های مورد نیازتون رو به تگ های انتخابی بدهد.

--و راه حل آخر که به نظر میاد مشکل فعلیتون رو رفع می کنه:

.article-entry p img {
   width:calc(100% + 240px);
   margin:0 -120px;
}
آخرین ویرایش: 18-08-2018 ساعت 21:16، توسط mehdigm
سلام چون صفحه رو full-width در نظر گرفتم همه چیز بزرگ میشه و میخواستم تگ p جمع و جور تر باشه البته حرف شما کاملا درسته بهتره با وردپرس تنظیمش کنم، این کدی هم که نوشتید تست کردم نشد متاسفانه. ولی خب بیشتر میخواستم روش حل این مشکل رو پیدا کنم. ممنونم – nex 1 سال پیش
2

سلام بهتر بود ساختار کد html رو هم بذاری... وقتی به p میای padding میدی اما image هم میگیره احتمالش زیاده که img هم داخل تگ p باشه. اینو چک کن. اگر اینطوریه میتونی برای image یه margin تعریف کنی

مثلا:

.article-entry p img {
   margin: 5px -120px;
}
سلام مشکل دقیقا همینه چون با inspect هم تست کردم دقیقا نشون میداد که تگ img داخل تگ p قرار داره ولی در حالت عادی طبق اون کدهای بالایی که گذاشتم با دستور php فراخوانی میشه و چیزی نباید قاطی بیاد. منظورت از ساختار html تو کد های css هست؟ اونجا چیزی ننوشتم – nex 1 سال پیش
nex 1 سال پیش
خود ادیتور اضافه میکنه معمولا همه چیو تو p میذاره وردپرس – SkyTech 1 سال پیش

خوش آمدید

برای طرح سوال، ایجاد بحث و فعالیت در سایت نیاز است ابتدا وارد حساب کاربری خود شوید. در صورتی که هنوز عضو سایت نیستید میتوانید در عرض تنها چند ثانیه ثبت نام کنید.

لطفا ابتدا لاگین کنید