4کلید برای داشتن سایتی کاملا ریسپانسیو و پاسخ گو

یکی از مواردی که  برای هر سایتی خیلی قابل توجه هست ریسپانسیو بودن قالب و قابلیت واکنش گرایی اونه.به زبانی دیگر یک سایت باید این قابلیت رو داشته باشه تا تمامی محتوای اون در هر دستگاهی ،با هر سیستم عاملی به خوبی به نمایش در بیاد.

قالب های زیادی تحت عنوان قالب های واکنش گرا وردپرس در بیگ تم معرفی شده که این قابلیت رو دارن.

در این مقاله نکاتی رو جهت نمایش کامل و داشتن سایتی  پاسخگو ذکر می کنیم.در واقع کد هایی برای پاسخ گویی مناسب محتوا و نمایش کامل مطالب و عکس ها ارایه خواهیم کرد.در قالب های پاسخ گو به صورت پیش فرض کد های مربوط به کار برده شدن ولی اگه قالب  سایت شما  به طور پیش فرض دارای این قابلیت نیست با ما همراه باشید.

………………………………………………………………………………………………………………..

آموزش وردپرس نکاتی برای داشتن سایتی کاملا ریسپانسیو و پاسخ گو

1) نمایش عکس هایی کاملا پاسخ گو:

Fluid images یا ایجاد عکس های سیال یکی از مهم ترین جنبه های طراحی سایت می باشد.کد های css خاصی بدین منظور به کار برده میشه که عکس های بزرگ،در کوچک ترین دستگاه های موبایل ،تبلت و…به بهترین کیفیت ممکن نمایش داده شن.

مثلا اگه سایز عکس شما 600 پیکسله،به طور خودکار سایز عکس روی 350 پیکسل تنظیم میشه و سعی می شه با بهترین کیفیت ارایه شه.

کد css زیر به شما این اطمینان رو می ده که عکس تا حد ممکن بزرگ و با کیفیت در سایت نمایش داده شه:

</pre>
img {max-width: 100%;}
<pre>

…………………………………………………………………………..

2) نمایش  ویدیو های پاسخ گوی Html 5

با کد زیر هر نوع ویدیویی که در سایت آپ شده  به صورت HTML و با کیفیت واقعی مطلوب به نمایش درمیاد.

</pre>
video {max-width: 100%height: auto;}
<pre>

………………………………………………………………………….

3) نمایش ویدیو های  پاسخ گوی یوتیوب

وجود ویدیو های یوتیوب به صورت مستقیم در سایت شما یکی از مزایای سایت شما محسوب میشه.یوتیوب و سایت های از این قبیل با شهرت و آمار بازدیدشون اعتبار های بزرگی برای سایت شما به شمار میان. پخش آنلاین ویدیو های یوتیوب

در سایت شما با بهترین کیفیت به وسیله ی کد css زیر ممکنه.کد زیر رو به فایل CSS قالب اضافه کنید.

</pre>
.video-container {position: relative;padding-bottom: 56.25%;padding-top: 30px; height: 0; overflow: hidden;}.video-container iframe,.video-container object,.video-container embed {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
<pre>

……………………………………………………………………..

4) ایجاد جدول های html ونمایش پاسخ گوی آن ها:

ممکنه برای شما هم پیش اومده باشه که با موبایلتون در یه سایت مشغول جست و جو هستید و جدول های مربوط به سایت و صفحه اصلی به دستی به نمایش درنیان.مثلا جدول در وسط سایت باشه و نوشته های ستون اون کمی کنارتر از جای اصلی(مثلا تا حدودی خارج جدول) نمایش داده شه.برای حل این مشکل و نمایش کاملا ریسپانسیو ابتدا پیشنهاد می کنم جدول هارو به صورت Html قرار بدید.

کد html مربوط به جدول:

</pre>
<table><thead><tr><th>First Name</th><th>Last Name</th><th>Job Title</th></tr></thead><tbody><tr><td>James</td><td>Matman</td><td>Chief Sandwich Eater</td></tr><tr><td>The</td><td>Tick</td><td>Crimefighter Sorta</td></tr></tbody></table>
<pre>

………………

کد css مربوط به جدول برای استایل جدول:

</pre>
/* Generic Styling, for Desktops/Laptops */table { width: 100%; border-collapse: collapse; }/* Zebra striping */tr:nth-of-type(odd) { background: #eee; }th { background: #333; color: white; font-weight: bold; }td, th { padding: 6px; border: 1px solid #ccc; text-align: left; }
<pre>

……………….

پس از ساخت جدول نوبت به ارایه جدول می رسه که باید پاسخ گو و ریسپانسیو باشه.بدین منظور کد زیر رو در فایل مربوط به css درج کنید.

</pre>
@media only screen and (max-width: 760px),(min-device-width: 768px) and (max-device-width: 1024px) {/* Force table to not be like tables anymore */table, thead, tbody, th, td, tr {display: block; }/* Hide table headers (but not display: none;, for accessibility) */thead tr { position: absolute;top: -9999px;left: -9999px;}tr { border: 1px solid #ccc; }td { /* Behave like a "row" */border: none;border-bottom: 1px solid #eee; position: relative;padding-left: 50%; }td:before { /* Now like a table header */position: absolute;/* Top/left values mimic padding */top: 6px;left: 6px;width: 45%; padding-right: 10px; white-space: nowrap;}/*Label the data*/td:nth-of-type(1):before { content: "First Name"; }td:nth-of-type(2):before { content: "Last Name"; }td:nth-of-type(3):before { content: "Job Title"; }td:nth-of-type(4):before { content: "Favorite Color"; }td:nth-of-type(5):before { content: "Wars of Trek?"; }td:nth-of-type(6):before { content: "Porn Name"; }td:nth-of-type(7):before { content: "Date of Birth"; }:nth-of-type(8):before { content: "Dream Vacation City"; }td:nth-of-type(9):before { content: "GPA"; }t:nth-of-type(10):before { content: "Arbitrary
<pre>

………………………………………………………………………………………………………………………..

موفق باشید.

منبع: بیگ تم