محتوا
- دانش لازم است: مقدماتی PHP و CSS
- نیاز دارد: نصب وردپرس ، ویرایشگر متن انتخابی
- زمان پروژه: 10 دقیقه
اگر در نسخه چاپی مجله .net مشترک شوید (اگر نه ، چرا که نه !؟) ، خواهید دید که در شماره این ماه مقاله بسیار خوبی در مورد "طراحی پاسخگو با وردپرس" ارائه شده است.
در این مقاله ، نویسنده جسی فریدمن تعداد زیادی از تکنیک های مفید را برای حداکثر استفاده و غلبه بر ویژگیهای ذاتی وردپرس به منظور تولید یک وب سایت پاسخگو واقعاً موثر تشریح می کند. اگر در فکر تولید یک سایت پاسخگو با وردپرس هستید ، قطعاً باید یک نسخه از مقاله وی را انتخاب کنید. باید بخوانید
من به تازگی وبلاگ شخصی خود را در وردپرس با استفاده از یک رویکرد پاسخگو و همراه اول بازسازی کردم و با برخی از تکنیک های مقاله آشنا شدم. با این حال ، تنها موردی که برای من بسیار برجسته بود ، رویکرد جسی برای امکان ایجاد تصاویر روان از طریق jQuery بود.
مشکل وردپرس و "تصاویر روان"
همانطور که مطمئن هستم همه شما از "تصاویر سیال" آگاه هستند - که از حداکثر عرض: 100٪ استفاده می کنند - برای اینکه تصاویر بتوانند به اندازه ظرف خود اندازه بگیرند ، نیاز به عرض و ارتفاع ثابت ندارند. متأسفانه ، وردپرس به طور خودکار ابعاد تصاویر تولید شده از کتابخانه رسانه را محاسبه می کند و ویژگی های عرض و ارتفاع مربوطه را به هر برچسب img> اضافه می کند.
این برای سرعت ارائه صفحه عالی است اما a عظیم در هنگام ایجاد طرح های پاسخگو ، کلید کار می کند زیرا دیگر ابعاد تصویر محدود به اندازه ظرف آنها نیست.
این یک مشکل است.
راه حل غیر jQuery
در مقاله خود Jesse 'استفاده از jQuery را برای حذف ویژگی های عرض و ارتفاع از تمام برچسب های img> صفحه به محض بارگیری پیشنهاد می کند. این مطمئناً جواب می دهد اما هنگام ساختن سایت من ایده اعتماد به JavaScript برای دستیابی به این هدف را دوست نداشتم ، مخصوصاً اگر تصاویر زیادی در صفحه مورد نظر وجود داشته باشد.
اینجا جایی است که فیلترهای وردپرس به کمک شما آمدند.
کد وردپرس فیلتر را به صورت زیر تعریف می کند:
"... قلاب هایی که وردپرس برای تغییر متن از انواع مختلف قبل از افزودن متن به پایگاه داده یا ارسال آن به صفحه مرورگر راه اندازی می کند."
همانطور که مشخص شد این دقیقاً همان چیزی است که ما به آن نیاز داریم. با تنظیم یک فیلتر برای اجرای همه تصاویر به عنوان آخرین اقدام قبل از اینکه آنها در صفحه ارائه شوند ، می توانیم با استفاده از PHP ویژگی های عرض و ارتفاع را حذف کنیم و بدین ترتیب نیاز به دستکاری (به طور بالقوه) گران قیمت DOM از طریق JavaScript را دور بزنیم.
کد
- /**
- * عملکردهای عکس العمل پاسخگو
- */
- add_filter ('post_thumbnail_html'، 'remove_thumbnail_dimensions'، 10)؛
- add_filter ('image_send_to_editor'، 'remove_thumbnail_dimensions'، 10)؛
- تابع remove_thumbnail_dimensions ($ html)
- $ html = preg_replace ('/ (عرض
در کد بالا ما با استفاده از تابع add_filter دو فیلتر اضافه می کنیم. آرگومان اول فیلتری است که می خواهیم آن را قلاب کنیم و مورد دوم تابعی است که می خواهیم هنگام فراخوانی فیلتر اجرا کنیم.
در کد ما به دو عملکرد مبهم تبدیل می شویم:
- post_thumbnail_html - تصاویر بازیابی شده با post_thumbnail ()
- تصویر_به_دارنده ارسال شود - تصاویر اضافه شده به ویرایشگر
سپس با استفاده از یک عبارت منظم ، ویژگی های عرض و ارتفاع را از برچسب های تصویر پاک می کنیم. اکنون وقتی تصاویر ما به مرورگر ارسال می شوند ، می توانند کاملاً روان و روان باشند ، دقیقاً همانطور که آقای مارکوت به ما گفت باید.
یک اعتراف
باید اعتراف کنم که فکر استفاده از آن را داشته ام فیلتر_ اضافه کنید برای حذف ویژگی هایی که نمی توانستم برای زندگی خودم فیلترهای صحیح وردپرس را پیدا کنم.
پس از جستجوی فراوان ، سرانجام به این پست بسیار مفید در وردپرس Stack Exchange توسط Nathaniel Taintor رسیدم که اطلاعات مربوط به دو فیلتر مورد نیاز من را ارائه می داد.
هشدارها
تا آنجا که من می دانم تنها عامل اصلی بازگشت به این روش این است که ویژگی های عرض و ارتفاع را از همه تصاویر موجود در سایت شما پاک نمی کند. من متوجه شدم که این مسئله ، مخصوصاً در تصاویر Gravatar است که وردپرس در نظرات استفاده می کند.
اگر کسی برای این مسئله راه حلی دارد ، لطفاً یک نظر بگذارید تا همه ما از آن بهره مند شویم.
امیدوارم این مورد مفید بوده و جایگزینی برای اتکا به جاوا اسکریپت برای پیاده سازی "تصاویر روان" در وب سایت های وردپرس به نمایش گذاشته باشد.
کلمات: دیوید اسمیت
دیو اسمیت طراح جلویی در نزدیکی شهر زیبای بات ، انگلستان است. وقتی او روی پروژه های وب جدید و مهیج کار نمی کند ، می توان در همه جا از گروه های جاز Big Band گرفته تا ارکسترهای Symphony در حال نواختن شیپور بود. می توانید به عنوانget_dave در توییتر با دیو همراه شوید.
