حل شده

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

بازدید35.9kپست ها2آخرین فعالیت5 سال پیش
0
3

سلام دوستان وقت بخیر
در قسمت ادامه مطلب وقتی میخوام به پاراگراف ها بگم که از چپ و راست پدینگ بگیرن و کوچکتر از مقدار عکس باشن خود اون عکس هم مثل پاراگراف ها پدینگ میگیره با اینکه من فقط به تگ 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 پاسخ

2

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

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

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

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

.article-entry p img {
   width:calc(100% + 240px);
   margin:0 -120px;
}
آخرین ویرایش: 18-08-2018 ???? 21:16، توسط mehdigm
2

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

مثلا:

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

سوال برنامه نویسی دارید؟

ندونستن عیب نیست، نپرسیدن چرا!

خوش آمدید

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