آموزش ساخت قالب وردپرس – قسمت اول

آموزش ساخت قالب وردپرس - قسمت اول - شرطی بی نام

چند وقتی می شد که قصد نوشتن یه مطلب جدید داشتم، از طرفی برای پروژه ای باید یک طرح رو تبدیل به قالب وردپرس می کردم. این شد که تصمیم گرفتم سری «آموزش ساخت قالب وردپرس» رو بنویسم. امیدوارم هر چه سریعتر این آموزش رو کامل کنم. احتمال اینکه نسخه ویدیویی این آموزش رو هم تهیه کنم وجود داره! ( آموزش ساخت قالب وردپرس – قسمت اول )

توضیحات

قبل از شروع یک سری توضیحات رو بگم. هدف ساختن یک Theme برای وردپرس هست. Theme رو بعضی، «قالب» و بعضی هم «پوسته» ترجمه می کنند. پس اگر جایی در طول آموزش گفته شد «قالب وردپرس» و جای دیگری گفته شد «پوسته وردپرس» منظور همون Theme بوده! تا جایی که من دیدم انگلیسی زبان ها از Create برای ساختن پوسته استفاده می کنند نه Design ! به همین دلیل من هم تصمیم گرفتم در طول آموزش از «ساختن قالب وردپرس» و یا «ایجاد قالب وردپرس» («ساختن پوسته وردپرس» و یا «ایجاد پوسته وردپرس») استفاده کنم، نه عبارت «طراحی قالب وردپرس» («طراحی پوسته وردپرس»)!  از اونجایی که آموزش به زبان فارسی هست و با نسخه فارسی وردپرس تهیه شده، عبارت ها و ترجمه ها و مسیر هایی که در طول آموزش استفاده می شه، همون هایی هستند که در ترجمه وردپرس فارسی و پنل فارسی وردپرس استفاده شده.

شروع ساخت پوسته وردپرس

برای ساختن قالب وردپرس اولین کار ساختن یک پوشه (فولدر) با نام قالب در مسیر قالب های وردپرس (wordpress/wp-content/themes/your-theme) است. اگر بعد از ساختن پوشه، در پنل مدیریت وردپرس به قسمت نمایش و پوسته ها بروید در انتهای پوسته های نصب شده با پیغام “پوسته‌ی خراب: شیوه‌نامه گم شده.” مواجه خواهید شد. نگران نباشید، چون ساختن پوشه در حقیقت کار صفرم است!

اولین کار ساختن فایل استایل (style.css) داخل پوشه قالب است. اما چرا اولین کار ساختن این فایل است؟ چون وردپرس از فایل style.css (دقت کنید نام فایل حتما درست و به همین شکل نوشته شده باشد) برای جمع آوری و نمایش اطلاعات قالب (پوسته) استفاده می کند. این اطلاعات شامل نام قالب، نویسنده، لایسنس و … می شود. کدهای زیر کدهای پایه و استانداردی هستند که وردپرس قادر خواهد بود به وسیله آنها قالب را تشخیص دهد و یک تصویر (پیش نمایش) از قالب ارایه کند. کد های زیر را در فایل استایل می نویسیم و فایل را دخیره می کنیم:

این کد‌ها در حقیقت اطلاعات قالب هستند که در قسمت پوسته ها و هنگامی که روی جزئیات قالب کلیک می کنید، نمایش داده می شود. اگر کدها به همین ترتیب نوشته شوند در قسمت جزئیات قالب، نام قالب (لینک به آدرس: http://site.com) و در کنار آن ورژن قالب (۱.۰)، سپس نام طراح/نویسنده کد قالب (لینک به آدرس: http://author.com) بعد از آن توضیحات قالب و در پایان برچسب هایی که برای قالب نوشته اید نمایش داده می شود.

اگر در قسمت مدیریت وردپرس دوباره به مسیر نمایش/پوسته ها بروید، دوباره با پیغامی تقریبا مشابه به پیغام خطای قبل روبرو خواهید شد. “پوسته‌ی خراب: قالب پیدا نشد. پوسته‌های مستقل باید یک پرونده‌ی index.php داشته باشند. زیرپوسته‌ها باید یک سربرگ قالب در style.css داشته باشند.”

خب قدم بعدی ساختن فایل index.php در پوشه قالب است. فایل index.php فایل پایه و زیربنایی است که وردپرس از طریق آن به کاربران اجازه می دهد به صورت پیش فرض سایت را مشاهده کنند. داخل این فایل می توانیم کد های کل طرح را بنویسیم، اما برای راحتی کنترل و همچنین پیروی از قوانین طراحی قالب وردپرس قدم بعدی ساخت فایل های header.php و footer.php است.

داخل فایل header.php کدهای زیر که کدهای قسمت هدر html هستند را می نویسیم:

و داخل فایل footer.php کد های زیر، که کدهای معمول html هستند را می نویسم:

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

حالا اگر داخل فایل index.php کد زیر را قرار دهید:

و سپس از قسمت مدیریت پوسته ها، قالب خود را فعال کنید و صفحه اصلی سایت را رفرش نمایید، عبارت “تست قالب” نمایش داده خواهد شد! اگر سورس صفحه را مشاهده کنید، می بینید که سورس به صورت زیر خواهد بود:

که کدهای قسمت هدر و فوتر در آن مشاهده نمی شوند. حال اگر کد های زیر را به فایل index.php اضافه کنید، مشاهده می کنید که قسمت هدر و فوتر نیز نمایش داده می شوند.

کار این کد ها فراخوانی فایل header.php و footer.php است.

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

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

Continue Reading

ساخت اسلایدر وردپرس بر اساس برچسب

ساخت اسلایدر وردپرس

ساخت اسلایدر وردپرس آخرین مطالب بر اساس برچسب خاص

برای پروژه ای، در صفحه اصلی، یک اسلایدر تعریف شده بود که مطالب دلخواه نویسنده رو داخل اسلایدر نمایش بده.  بعد از کمی جستجو و پرس و جو به دو انتخاب رسیدم، یکی پلاگین های غیر رایگان وردپرس مثل Slider Revolution که یک گزینه بسیار قوی و حرفه ای با امکانات زیاد و تقریبا بی دردسر با قیمت ۲۵ دلار(!) بود، و یکی هم ساخت یک اسلایدر با jQuery و کد کردن اون برای وردپرس بود. از اونجایی که پروژه شخصی بود و بوده زیادی در این فاز براش در نظر گرفته نشده بود، مورد دوم، یعنی ساخت اسلایدر با jQuery انتخاب شد. ( ساخت اسلایدر وردپرس )
در ادامه نحوه ساخت این اسلایدر رو شرح می دم.
برای شروع باید یک اسلایدر رو انتخاب می کردم، که من از بین گزینه های موجود FlexSlider رو انتخاب کردم و آموزش رو برای این اسلایدر آماده کردم. که البته می شه برای سایر اسلایدرها هم استفاده کرد.

گام اول:

اول FlexSlider رو از این آدرس دانلود کنید. بعد فایل رو از از زیپ خارج کنید.

گام دوم:

داخل پوشه پوسته (theme)، پوشه ای به نام inc وجود داره، اگر همچین پوشه ای وجود نداشت، پوشه ای با این نام بسازید. داخل پوشه inc پوشه ای به نام slider ایجاد کنید.

ساخت اسلایدر وردپرس
ساخت اسلایدر وردپرس

گام سوم:

از داخل پوشه دانلود شده Flexslider دو پوشه images و fonts و دو فایل jquery.flexslider-min.js و flexslider.css به داخل پوشه slider که بالاتر ساختید منتقل کنید و یک پوشه به نام js  بسازید و فایل jquery.flexslider-min.js رو به داخل اون منتقل کنید و یکی هم به نام  css بسازید و فایل flexslider.css رو هم به داخلش منتقل کنید.

ساخت اسلایدر وردپرس
ساخت اسلایدر وردپرس

گام چهارم:

داخل پوشه slider یک فایل به نام slider.php ایجاد کنید و کد‌های زیر رو داخل اون فایل قرار بدید و فایل رو ذخیره کنید.

داخل کد های بالا کد زیر رو پیدا کنید، و به جای عدد “۱۹۳” شماره id برچسب مورد نظرتون رو قرار بدید:

گام پنجم:

کد‌های زیر رو داخل فایل functions.php کپی کنید:

گام آخر:

کد زیر را در جایی که می خواهید اسلایدر نمایش داده شود وارد کنید:

 

ساخت اسلایدر وردپرس تمام شد!

چند تا توضیح:

۱- تعداد اسلاید‌ها و یا به عبارت بهتر تعداد پستهایی که می خواید داخل اسلایدر نمایش داده بشه رو با تغییر عدد “۵” در کد زیر تعیین کنید:

۲- کدهایی که برای این اسلایدر استفاده شده جهت نمایش عکس شاخص پست ها بر اساس برچسب مورد نطر هست شما می تونید کدها رو برای دسته ها تغییر بدید و استفاده کنید.
۳- برای اینکه ابعاد اسلایدر به هم ریخته نشه، بهتره عکس هایی رو که به عنوان عکس شاخص قرار می دید، ابعادشون یکسان و ثابت باشه. برای این کار می تونید قبل از آپلود عکس، خودتون این کار رو انجام بدید و یا از طریق خود وردپرس عکس ها رو کراپ کنید. (این مورد رو در یک پست مجزا توضیح می دم.)
۴- این اسلایدر، بر اساس اسلایدر پایه FlexSlider آماده شده، شما می تونید با مراجعه به این صفحه اسلایدر مورد نظرتون رو انتخاب کنید و کد‌های همون اسلایدر رو داخل فایل slider.php استفاده کنید.
۵- برای کاستومایز کردن اسلایدر (استفاده از ویژگی‌ها) می تونید به این صفحه مراجعه کنید و با توجه به نیازتون تغییرات لازم رو در اسلایدر بدید.

Save

Save

Save

Save

Continue Reading

نظرسنجی وردپرس

نظرسنجی وردپرس

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

امسال نیز مانند سال های پیش این نظرسنجی از طرف وردپرس در « این آدرس » قرار گرفته است. در صورت تمایل، به سوالات این نظرسنجی پاسخ دهید.

سایت وردپرس:

وردپرس یک سکوی انتشار شخصی پیشرفته در عین حال ساده و زیبا می‌باشد، وردپرس یک نرم‌افزار آزاد٬ رایگان و بازمتن است. در وردپرس به سادگی، زیبایی، کارایی و پیروی از استانداردهای وب اهمیت بسیاری داده شده‌است. گسترده‌گی افزونه‌ها، پوسته‌ها، مستندات و پشتیبانی این سیستم مدیریت وبلاگ در آن حد است که آن را برای مدیریت هرگونه وبلاگ یا سایت با هرگونه امکانات سازگار نموده است.

وردپرس فارسی:

وردپرس یک سکوی انتشار مبتنی بر وب یا به بیان ساده‌تر یک نرم‌افزار تحت وب است که در واقع ادامه موفقیت‌آمیز پروژه b2 می باشد و توسط مت مولوگ بنیان گذاری شده است.
مت و همکارانش با تاسیس شرکت Automattic هم‌اکنون در حال گسترش این نرم افزار و پروژه های موازی آن مانند Akismet می باشند.
عمومی‌ترین استفاده از وردپرس برای راه‌اندازی یک وبلاگ می‌باشد زیرا وردپرس دارای هسته‌ای قدرتمند است و پیشروترین نرم‌افزار در این زمینه به‌شمار می‌رود.
وردپرس با زبان برنامه نویسی محبوب و قدرتمند PHP نوشته شده و از قدرت MySQL استفاده می کند. وردپرس یک نرم افزار بازمتن (Open Source) می باشد و بر مبنای اجازه نامه Gnu Public License (GPL) منتشر می شود بنابراین اجازه‌نامه تمامی موارد استفاده از وردپرس کاملا رایگان می باشد، همچنین شما می توانید وردپرس را با خیال راحت تغییر دهید و به عنوان سکویی برای پروژه های خود به کار گیرید.

آدرس نظرسنجی: WordPress 2016 Survey

Continue Reading

مطالب وبلاگ وردپرس در فروشگاه پرستاشاپ

وردپرس - پرستاشاپ

مدت زیادی دنبال این بودم که بتونم آخرین مطالب وبلاگی که با سیستم وردپرس راه اندازی شده به همراه تصویر شاخص (Featured Image) رو داخل صفحه اصلی فروشگاه راه اندازی شده با پرستاشاپ، نمایش بدم.
پرستاشاپ ماژولی داره به نام Blockrss که با نصب اون و اضافه کردن فید وبلاگ مورد نظر، عنوان (Title) آخرین مطالب رو در قسمتی که ماژول قرار داده شده (ساید بار و یا فوتر و یا هرجایی که برای قرارگیری ماژول داخل قالب تعریف شده) نمایش می ده.
اما اگر بخواهید عکس شاخص (Featured Image) رو هم نمایش بده باید تغییر کوچیکی داخل فایل blockrss.tpl بدید.
بعد از باز کردن فایل blockrss.tpl کد زیر رو پیدا کنید:

و کد زیر رو داخل تگ <li></li> اضافه کنید:

برای اینکه هم عنوان نوشته و هم عکس به صورت لینک در بیان و بشه به اون از طریق CSS استایل داد، کد رو به صورت زیر نوشتم:

از کدهای زیر هم برای استایل دهی استفاده کردم:

که این کد و نحوه استفاده از تگ‌ های HTML برای مثال و نمونه هست، شما می تونید از تگ‌های مورد نیاز خودتون استفاده کنید.

Continue Reading