چگونه برای وردپرس پوسته بسازیم؟ ...::: قسمت سیزدهم :::...
همانطور که به شما قول داده بودم، در این جلسه به شما خواهیم گفت که چگونه امکان ویجیت را برای سایدبار خود فعال کنید. اما در این جلسه علاوه بر مبحث ویجیت، بحث فوتر و اعتبار سنجی (Validate) صفحات را نیز مطرح خواهیم کرد، تا با یاری خدا در جلسات بعد به طور جدی به بحث CSS بپردازیم. با توجه به اینکه مباحث بسیار زیاد است، تصمیم گرفته ام که بعد از اتمام این سری آموزشی، سوالات متداول شما دوستان را همراه با جواب بطور پست های جداگانه مطرح کنم تا از اشکالات شما دوستان قدری بکاهم.
فعلاً باید سعی کنیم تا همین سری آموزشی به پایان برسد، برای شروع درس به ادامه مطلب مراجعه کنید…
قبل از اینکه درس را بطور جدی شروع کنم، به این نکته که یکی از دوستان به من اطلاع داد، اشاره می کنم. نکته ی کوچک ولی مهمی که من فراموش کرده بودم به اطلاع شما دوستان برسانم، این است که مدل Encoding فایل های ذخیره شده تان را UTF-8 قرار دهید. از هر ادیتوری که می خواهید استفاده کنید ولی Encoding را utf-8 قرار دهید، اگر تا بحال اینکار را انجام نداده اید، هیچ مشکلی ندارد، ولی از همین الان اینکار را انجام دهید تا در بعدها با مشکل مواجه نشوید. هنگامی که مدل Encoding شما utf-8 باشد، در هنگام فارسی نویسی با هیچ مشکلی مواجه نخواهید شد. خوب شاید به شما کمی به شما استرس وارد کرده ام. هیچ غصه ای نخورید چون اینکار در هر مرحله ای براحتی می تواند انجام شود و مشکلاتی که برای شما بوجود خواهد آمد براحتی قابل تعمیر است، البته اگر همین الان اینکار را انجام دهید، هیچ مشکلی را برای شما بوجود نخواهد آمد چون هیچ متن فارسی درون فایلهایتان قرار ندارد.
خوب برای اینکه کار را برای شما آسان کنم نحوه ی اینکار را به شما در Notepad نشان می دهم. هر یک از فایلهای مورد نظرتان را در Notepad باز کنید. به منوی فایل رفته و بروی Save As کلیک کنید. در صفحه ای که باز شد. در بخش Encoding گزینه ی UTF-8 را انتخاب کنید دقیقاً مانند عکس زیر:
فایل را دقیقاً بروی فایل قبلی ذخیره کنید. این اعمال را بروی تمامی فایلهای داخل پوشه انجام دهید. به همین سادگی….
اما اگر اینکار برایتان کمی سخت بود، یک راه بهتر و آسانتر نیز برایتان سراغ دارم. کار کردن با Notepad ساده ترین راهی است که می توان استفاده کرد، من خودم به شخصه از برنامه ی Notepad++ استفاده می کنم. به شما هم پیشنهاد استفاده از این برنامه را می دهم. حال اگر از این برنامه استفاده می کنید یا خواهید کرد، برای تبدیل Encoding پاراگراف زیر را مطالعه کنید:
روش کار بسیار ساده است، فایل مورد نظر را باز کنید، به تب Format بروید و از آنجا گزینه ی Encode in UTF-8 without BOM را انتخاب کنید. مانند عکس زیر:
حال فایل را Save کنید. به همین راحتی به همین خوشمزگی…
تازه درسمان شروع خواهد شد، امیدوارم که خسته نباشید….
بخش اول- فعال سازی Widget برای سایدبار:
◊ اما شاید برای شما این سوال پیش بیاید که ویجیت چیست؟
در جواب این سوال باید گفت که ویجیت (Widget) همان بخشی از وردپرس است که در فارسی به نام ابزارک معنی شده است. در واقع ابزارکهای وردپرس، لوازمی برای سایدبار می باشند که شما براحتی می توانید آنها را در سایدبار سایت خود به نمایش در آورید. حقیقتاً ابزارک ها کار را برای شما آسان می کنند و به مدیران سایت اجازه می دهند تا بدون داشتن دانش برنامه نویسی وب، بتوانند براحتی عکس ، مطلب ، گجت و … را درون سایدبار وبلاگشان به نمایش در آورند و یا مکان آنها را جابجا کنند. جالب است بدانید که در ورژن های قبلی وردپرس امکان ابزارک به این نوع وجود نداشته است و برای استفاده از قابلیت ابزارک، باید یک پلاگین خاص را نصب می کردیم، اما وردپرس به سرعت پی برد که این بخش یکی از قسمتهای بسیار لازم برای وردپرس می باشد و در بسته های بعدی این قسمت را بطور مستقیم درون وردپرس جای داد.
امیدوارم که توضیحات کوتاه بنده برای شما کافی باشد. اما برای فعال کردن قابلیت ویجیت مراحل زیر را پی بگیرید:
• مرحله ی اول: ساختن فایل functions.php
یک Notepad جدید باز کنید، که کاملاً خالی باشد، و آن را با نام functions.php ثبت کنید(البته توجه کنید که Encoding فایل UTF-8 باشد.). هر چیزی که داخل فایل functions.txt وجود دارد را، به درون فایل functions.php کپی کنید و سپس تغییرات مورد نظر را Save کرده و سپس صفحه ی Notepad را ببندید.
الان شما باید چهار فایل را درون فولدر tutorial داشته باشید.
• مرحله ی دوم: ابزارک در سایدبار
کد زیر را مستقیماً بعد از اولین خط تگ
در بخش سایدبار تایپ کنید:
این کد را نیز به طور مستقیم قبل از تگ </ul> تایپ کنید:
حال فایل index.php را save کنید، شما هیچ تغییری را مشاهده نخواهید کرد تا زمانی که در قسمت ابزارک ها از یک ویجیت استفاده کنید، که در این صورت تغییرات اعمال خواهد شد.
همین تمام شد. باورتان می شد که اینکار تا این حد ساده باشد.
بخش دوم – اضافه کردن فوتر (Footer) :
این بخش از درس نیز بسیار ساده است، شما تنها باید یک div یا باکس مخفی زیر بخش div سایدبار اضافه کنید و داخل این تگ را با چیزهای مثل نوشته ی کپی رایت پر کنید. فکر کنم شما اینکار را بدون هیچگونه دستورالعملی نیز می توانید انجام دهید، اینکار را خود به تنهایی انجام دهید و سپس برگردید و ادامه مطلب را بخوانید، تا متوجه شوید که تا چه میزان کار را درست انجام داده اید:
• مرحله ی اول : اضافه کردن div
کدهای زیر را در زیر div مربوط به Sidebar تایپ کنید:
• مرحله ی دوم : اضافه کنید متن فوتر
داخل تگ پاراگراف (
و
Copyright © 2008
notepad را save کرده و مرورگرتان را Refresh کنید، این هست نتیجه:
حروف © کدهایی هستند که علامت کپی رایت (©) را به شما نشان می دهند. همچنین، بیاد بیاورید که bloginfo() تابعی هست که از آن برای قرار دادن نام عنوان سایت در هدر استفاده کردیم که من دوباره از آنها در فوتر استفاه کردم. همچنین بدانید که کلمه name داخل bloginfo عنوان وبلاگ و همچنین url داخل bloginfo آدرس وبلاگ را صدا می زند.
فوتر نیز به همین سادگی ساخته شد.
بخش سوم- اعتبار سنجی (Validate) صفحات:
قبل از اینکه به شما CSS و کار با فایل Style.css آموزش دهیم، شما نیاز دارید که بدانید چگونه برای کدهایتان اعتبار نامه بگیرید.
قبل از این نحوه ی اعتبار سنجی را برای شما توضیح دهیم باید بگویم که برای برنامه نویسی وب یکسری قوانین وجود دارد، حال اگر شما از قوانین تبعیت کردید، در حقیقت برای صفحات خود گواهی نامه را نیز دریافت خواهید کرد، در غیر اینصورت صفحات شما گواهی ندارد. البته اصلاً نگران نباشید. چون انصافاً رعایت تمامی این قوانین آنچنان آسان نیست و نداشتن گواهی نیز نقص بزرگی به حساب نمی آید. این را نیز بگویم که ظاهر یک سایت هیچ ربطی به گواهی داشتن یا نداشتن ندارد، چه بسا سایتهای بسیار زیبایی که گواهی نداشته و سایتهایی نا زیبایی که گواهی دارند. این را نیز بدانید که بسیاری از سایتهای بزرگ فعلی نیز فاقد این گواهی نامه می باشند.
Validate یا Validating یا Validation به سادگی معنی مطمئن شدن درباره نداشتن ایراد را می دهد. من به شما دو لینک XHTML Validator و CSS Validator را می دهم، که از این دو لینک قادر به بررسی اعتبار صفحات تان می باشید. لینک XHTML Validator برای اعتبار سنجی صفحات اصطلاحاً html می باشد و لینک CSS Validator نیز برای اعتبار سنجی کدهای CSS می باشد که البته هنوز در این رابطه چیزی نخوانده اید.
خوب برای اعتبار سنجی روی XHTML Validator کلیک کرده تا صفحه آن باز شود. حال به صفحه ای که طراحی کرده ایم در مرورگر بروید به تب View رفته و سپس Page Source یا Source را انتخاب کنید. پنجره ای برای شما باز می شود. شما باید همه کدها را انتخاب کنید، برای اینکار می توانید به سادگی دکمه ی Ctrl+a را فشار دهید. سپس همه کدها را انتخاب کنید، برای اینکار نیز می توانید به سادگی دکمه های Ctrl+c کمک بگیرید.
به صفحه ی XHTML Validator باز گردید و در داخل بخش Validate by Direct Input تمامی کدها را Paste کنید برای اینکار می توانید از Ctrl+v استفاده کنید. حال بروی دکمه ی Check کلیک کنید.
کدهای شما توسط validator چک خواهد شد، سپس نتیجه برای شما نمایان خواهد گشت. اگر پیغام سبز بود، یعنی شما هیچ ایرادی نداشتید. و اگر قرمز بود، معلوم می شود که نتوانسته اید اعتبار لازم را دریافت کنید. البته validator به شما می گوید که در کجا ها ایراد داشتید، که اینکار شما را در ایراد یابی کدها یاری خواهد کرد.
درس امروز ما که شامل سه بخش بود به پایان رسید، در جلسات بعدی به شما خواهیم گفت که چگونه با CSS کار کنید، مطمئناً نفس در سینه تان حبس شده است، ولی نگران نباشید، خیلی ساده است….