سعید شعبانی

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

17 پست در این موضوع قرار دارد

چگونه می شوند قالبی که هیچ یک از ویژگی های یک قالب واکنشگرا را ندارد تبدیل به یک قالب کاملا واکنش گرا کرد. از کجا باید شروع کرد؟

به اشتراک گذاری این پست


لینک به پست

بایستی با مفهوم css media queries در css آشنا باشید ولی اصلا پیشنهاد نمی کنم که این کار را انجام چون بسیار دشوار است در عوض از فریمورکهایی که آماده می باشند استفاده کنید...#

به اشتراک گذاری این پست


لینک به پست

بایستی با مفهوم css media queries در css آشنا باشید ولی اصلا پیشنهاد نمی کنم که این کار را انجام چون بسیار دشوار است در عوض از فریمورکهایی که آماده می باشند استفاده کنید...#

منظور از فریمورکهایی آماده چی هست؟ آیا با آنها می توان قالب فعلی را به یک قالب واکنشگرا تبدیل کرد؟

به اشتراک گذاری این پست


لینک به پست

یه نمونه rootstheme که من خودم در این طرح از اون بهره گرفتم:


http://mpf90.ir/wordpress/

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

به اشتراک گذاری این پست


لینک به پست
بایستی با مفهوم css media queries در css آشنا باشید ولی اصلا پیشنهاد نمی کنم که این کار را انجام چون بسیار دشوار است در عوض از فریمورکهایی که آماده می باشند استفاده کنید...#

به اشتراک گذاری این پست


لینک به پست

خوب زمانی که از یک قالب واکنش گرا استفاده کنیم آیا می شود که باکس ها یا المنت هایی را اضافه یا حذف کرد و آیا قالب هنوز واکنش گرا باقی می ماند؟

ویرایش شده در توسط dnojir

به اشتراک گذاری این پست


لینک به پست

بله همه کار رو فریمورک موردنظر انجام میده. اصل کار فریمورک هم همین هست.

به اشتراک گذاری این پست


لینک به پست

بله همه کار رو فریمورک موردنظر انجام میده. اصل کار فریمورک هم همین هست.

آقا مرتضی مشیه کمی توضیح بدید که چجوریاست؟ نمیشه توسط افزونه firebug این قابلیت رو استفاده کرد؟

به اشتراک گذاری این پست


لینک به پست

افزونه فایرباگ کارش کاوش در کدهای سایت هست.

شما برای اینکه لیوت سایتتون براساس کاربر واکنش نشون بده باید کدهای استایل رو تغییر بدید. بهتره آموزش زیر رو مطالعه کنید برای شروع مناسب هست:

http://css-tricks.com/css-media-queries/

به اشتراک گذاری این پست


لینک به پست

ببخشید ، .واکنش گرا یعنی چی؟

به اشتراک گذاری این پست


لینک به پست

ببخشید ، .واکنش گرا یعنی چی؟


http://en.wikipedia.org/wiki/Responsive_web_design

+

وب سایت های واکنش گرا

ویرایش شده در توسط oMid

به اشتراک گذاری این پست


لینک به پست

راه دیگر در طراحی واکنش گرا استفاده از Javascript به جای CSS است. این راه حل مخصوصا برای ابزارهایی که از CSS به درستی پشتیبانی نمی کنند، کاربرد خواهد داشت. معمولا به عنوان پشتیبان CSS نیز بکار می روند.

یک کتابخانه استاندارد از javascript وجود دارد که برای سازگار ساختن مرورگرهای قدیمی با CSS3 نوشته شده است. برای استفاده از این کتابخوانه به –css3-mediaqueries.js می توانید مراجعه کنید.

در زیر نمونه ای از کدهای جاوااسکریپت را مشاهده می کنید که بر ااس اندازه صفحه، استایل مورد نظر را باز می کند.

design-1.png

design-2.png

به نظر شما خوبه از جاوا اسکریپت استفاده کنیم؟

به اشتراک گذاری این پست


لینک به پست

خوب وقتی با css می تونیم با js چرا؟ عین پیچوندن لقمه و گذاشتن تو دهن میمونه

به اشتراک گذاری این پست


لینک به پست

این رو از یه وبلاگی پیدا کردم . تست کنید ببینید جواب میده؟


/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

تو /* Styles */ ها باید استایل مخصوص خودتون رو وارد کنید و کل فایل رو تو یه فایل css در صفحه خودتون لود کنید

منبع : "وبلاگ احد نعمتی"

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری

  • مطالب مشابه

    • توسط logomaster
      سلام ، من روی یک سایت وردپرسی به تازگی یه قالب (اسکریپت) نصب کردم (اولین بارمه که اسکریپت نصب می کنم)
      قالب رو کاملا نصب کردم بدون هیچ مشکلی. حالا فقط برای ورود به مدیریت وردپرس ، یوزر و پسورد میخواد که نمیدونم از کجا باید اینارو پیدا کنم
      ممنون
       
       
    • توسط Sony
      با سلام
      چند قالب از این سایت گرفتم ولی متاسفانه با پوشه اصلی وردپرس متفاوته
      در هر صورت پوشه های مذبور را به wwwانتقال دادم و اقدام به نصب کردم
      که با این پیغام رو برو شدم 
       
      این هم تصویر پوشه فایل ها
       
      خواهشمند است راهنمایی بفرمایید چطور میتونم این نوع قالب ها را نصب کنم
      با تشکر از شما


    • توسط فردین
      سلام دوستان
      دوستان لطفا به داد من برسید
      من قالبی گرفتم که توش تبلیغ سایت دیگه ای هست و هر جایی رو گشتم نتونستم پیداش کنم و پاکش کنم
      حتی با افزونه ی String Locator هم سرچ کردم پیداش نکردم .
      ولی تو قسمت inspect میاد ولی نمیدونم کودوم فایل قالب هست 
      این رو هم اضافه کنم وقتی وارد پنل مدیریت میشم این کدا دیگه نمیاد ولی خارج که میشم هست
      یعنی فقط مدیرای سایت نمیبینن بقیه میبینن
      این کد ها باعث توی موبایل فقط این قسمتو نشون بده بعد باید خیلی ببریش راست که سایت بیاد به عکس ها دقت کنید خودتون متوجه میشید
      یکی از کد ها اینه
      <div style="position:absolute;top:0;left:-9999px;">Want create site? Find <a href="http://dlwordpress.com/">Free WordPress Themes</a> and plugins.</div> یکی از کد ها هم اینه 
      <div style="position:absolute;top:0;left:-9999px;">Did you find apk for android? You can find new <a href="https://dlandroid24.com/">Free Android Games</a> and apps.</div> دوستانی من کلافه شدم نمیتونم کد هارو پیدا کنمو حذفشون کنم لطفا کسی اگر میتونه راهنماییم کنه ممنون
      امیدوارم متوجه شده باشید منظورم چی هست
      خواهشا راهی بگید که هر بار خودم بتونم اینو پیدا کنمو پاک کنم چون قالب اپدیت میشه و دوباره این مشکلات هست
      نرم افزای یا چیزی هست بشه مثل inspect کد هارو ویرایش کرد ولی بشه سیوش کرد


    • توسط taha1414
      باسلام خداقوت
      بنده سایتی با قالب صحیفه - از یکی از سایت های دانلود رایگان-  راه اندازی کردم. ووکامرس هم نصب کردم
      حالا چند مشکل دارم که واقعا عاصی شدم و هر کار کردم درست نشد و حتی سایتی که قالب رو گرفتم هم جواب درست حسابی ندادن... / ضمنا از چند سایت دیگه هم قالب رو گرفتم ولی باز نشد.
      1. فونت های فارسی موجود در قالب کار نمی کنند؟
      2.در نمایش محصولات ووکامرس در صفحه اول نمایش درست و ارایشی ندارد؟
      3.تصاویر هم گاهی لود نمی شود؟
       
      سایت مورد نظر: tolidemihan.ir
      باتشکر از پاسخ هایتان...
       
       
    • توسط maryam300
      سلام چکار کنم تا ایمیلی که ارسال میشه راست چین باشه. حتی از افزونه email-templates هم استفاده کردم ولی همچنان چپ چین هست.