سعید شعبانی

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

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

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

2

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


لینک به پست

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

7

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


لینک به پست

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

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

1

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


لینک به پست

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


http://mpf90.ir/wordpress/

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

2

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


لینک به پست

نمی تونید قالب فعلی رو تبدیل کنید

یعنی هیچ راهی نداره؟

0

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


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

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


لینک به پست

ارسال شده در (ویرایش شده)

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

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

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


لینک به پست

بله...#

1

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


لینک به پست

تمام کار یک قالب واکنش گرا بر عهده css media queries در css است؟

0

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


لینک به پست

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

1

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


لینک به پست

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

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

0

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


لینک به پست

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

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

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

4

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


لینک به پست

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

0

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


لینک به پست

ارسال شده در (ویرایش شده)

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


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

+

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

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

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


لینک به پست

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

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

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

design-1.png

design-2.png

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

0

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


لینک به پست

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

1

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


لینک به پست

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


/* 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 در صفحه خودتون لود کنید

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

1

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


لینک به پست

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

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

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

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


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

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

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


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

  • مطالب مشابه

    • توسط Jamal Poosti
      سلام خسته نباشید من میخواستم ی سایت مشابه lynda یا فرانش بسازم ولی خب نمیدونم از چه افزونه یا قالبی استفاده کنم لطفا اساتید راهنمایی فرمایید.
    • توسط M a H D i
      باسلام و احترام
       
      من دنبال یک سایتی مثل سایت godui بودم که ایکن هایی به همراه انیمیشن درونش داشته باشه تا ازش الگو بگیرم
      اگر کسی میشناسته لطفا معرفی کنه
      به عنوان نمونه مثلا سایت تامین اجتماعی (البته برای تامین اجتماعی انیمیشن نداره!)
      https://www.tamin.ir
      باتشکر از شما

    • توسط macse
      سلام
      خواستم از این طریق قالب پینکوب رو که با الهام از سایت های Pinterest و Unsplash و برخی سایت های مشابه دیگه طراحی شد رو خدمتتون معرفی کنم در ضمن این قالب رایگان و متن باز هستش (بدون متن کپی رایت و... البته اگر من رو بعنوان طراح ذکر کنید خوشحال می شم )
      می تونید از گیت هاب دانلودش کنید و اگر مایل بودید توسعش بدید: https://github.com/qasedak/Pinkoob/releases
      خوشحال میشم اگر باگ یا مشکلی وجود داشت با من برای حل در میان بگذارین.
      برخی امکانات قالب پینکوب
      کاملا واکنشگرا هماهنگی کامل با اصول سئو کاملا قابل شخصی سازی متن باز و تحت مجوز MIT امکان مدیریت تبلیغات (Adsense) و بنر ها امکان تغییر پویا استایل براساس ساعات شبانه روز (استایل شب و روز) امکانات انتخاب استایل ثابت برای قالب (فقط شب یا روز) امکان انتخاب تصویر متخب روز برای نمایش در صفحه اصلی (تصویر دلخواه/تصویر تصادفی/جدیدترین تصویر) امکان شخصی سازی بخش تصویر روزانه درصفحه اصلی نمایش تصاویر صفحه اصلی براساس لایک ها، بازنشرها، دیدگاه ها و یا تصادفی (در بازه زمانی معین) امکان اتصال به دیدگاه های فیس بوک Infinite Scroll نمایش بصورت لایت باکس امکان نمایش قیمت روی تصاویر برای پست های تبلیغاتی (مانند اینستاگرام) امکان ارسال چندین عکس دریک پست (مانند اینستاگرام) امکان زمانبندی پاکسازی رسانه هایی که پست یا آلبوم آنها توسط کاربر پاک شده اند امکان ایجاد یک وبلاگ در کنار شبکه اجتماعی پشتیبانی از افزونه های WP Super cache، Exifography، WP Social Login، WP-Postratings دسته بندی تصاویر بر اساس رنگبندی سیستم جستجو همراه با فیلتر های مختلف و امکان جستجو میان کاربران برای کاربرانی که ثبت نام کرده اند امکان ویرایش دیدگاه برای کاربران پشتیبانی از آپلود ویدیو با فرمت های مختلف (mp4, ogg, webm) بخاطر سپردن آخرین آلبوم مورد استفاده قرار گرفته توسط کاربر امکان افزون تگ با فشردن کلید فاصله بجای استفاده از کاما برای جدا کردن تگ ها امکان تعیین آلبوم پیشفرض برای کاربران نمایش تصاویر مرتبط بر اساس تگ امکان آپلود تصاویر با استفاده از آدرس آنها در وب بصورت مستقیم بسیار کم حجم (۲.۵ مگابایت)
    • توسط alimelody
      درود به همگی دوستان 
      آقا من میخواستم یه برگه دلخواه درست کنم و یک کدی بود که باید توی یه فایل php درست میکردم و کپی میکردم توی هاست 
      بعد از اینکه کد رو کپی کردم کل قالب سایتم ترکید و همچی به هم ریخته 
      حالا من یه بکاپ واسه یکماه پیشمو دارم
      چطور میتونم فایلهایی رو کپی کنم که فقط نمای سایتم برگرده به حالت اول
      یعنی بازگردانی بکاپ نکنم
      ایا راهی داره؟ 
      چون نمیخوام مطالب جدید حذف بشن
      ممنون میشم کمکم کنید سپاس از لطفتون 
      اینم لینک سایتمه
      alimelody.ir
    • توسط Ali Brm
      با سلام خدمت دوستان
      سوالی که داشتم اینه من اخیرا کار روی یک قالبی رو شروع کردم که خب سایت سازنده اش اونو میفروخت ولی من توی یک سایت ایرانی اونو به صورت رایگان گرفتم. فک کنم یه جورایی کرکش کردن
      مشکلی که الان دارم اینه که توی کد سایتم اسم اون سایت فارسی دائما دیده میشه. متاسفانه به خاطر قوانین انجمن نمیتونم نه اسم قالب رو بیارم نه اسم سایت فارسی رو.
      حالا من برای مثال اسم اون سایت فارسی رو میگم "فلان پرس". مثلا اگه توی inspect به فونت متن هام نگاه می کنم اسم فونت رو نوشته "folanpress b Yekan"
      از این موارد بسیار توی قالبم هست و هر روز دارم تو جاهای بیشتر اسمشون رو میبینم.
      چجوری می تونم این اسم رو حذف کنم یا به نظرتون اصلا قالبم رو عوض کنم؟
      این مسئله رو برای چی اون سایت فارسی انجام داده روی Rank سایت خودش تاثیر داره؟