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

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

پوسته مربوط به هدر

در گذشته آموزش ساخت قالب وردپرس (قسمت اول و قسمت دوم ) را برای شما منتشر کردیم . در این قسمت در بخش هدر متمرکز خواهیم بود و با کدهای php زیادی سر و کار خواهیم داشت. البته کارهایی نیز برای سازگاری بهتر پوسته با موتورهای جستجو خواهیم کرد. در کل فصل مهم و مفیدی را در پیش رو خواهیم داشت. در حال حاضر پوسته ما معتبر نیست و این موضوع به دلیل نداشتن ویژگی Doctype در کد HTML است. doctype باعث می شود که به مرورگر اعلام شود چگونه صفحه باز شده تفسیر شود. برای افزودن این امکان به پوسته خود ، header.php را باز نمایید و کد زیر را در اول پوسته و قبل از هر کد دیگری قرار دهید.

هنوز کار ما در بالای کدها تمام نشده است. نوبت به افزودن چند صفت به تگ اولیه HTML است. کد زیر را جایگزین تگ html نمایید:

اکنون وارد بخش <head> می شویم. در بخش head معمولا اطلاعاتی در مورد صفحه قرار می گیرد که شامل عنوان صفحه که در بالای مرورگر نمایش داده می شود ، فیدهای RSS و همین طور وصل نمودن فایل CSS به صفحه است. تا یادمان نرفته باید گفت که لازم است کمی تغییرات در فایل functions.php ایجاد کنیم. فایل خالی functions.php را در ویرایشگر متنی خود باز کرده و بعد از تایپ کردن عبارت <?PHP کد زیر را به آن منتقل نمایید :

تابع load_theme_textdomain به وردپرس می گوید ما می خواهیم پوسته مان برای ترجمه به زبان های مختلف در دسترس قرار بگیرد. همین طور این تابع اعلام می کند فایل های مربوط به ترجمه در پوشه ای به نام languages قرار خواهند گرفت. در نظر داشته باشید که یک توسعه دهنده ی چیره دست باید به فکر تمامی زبان ها باشد و تا جایی که ممکن است تمامی بخش های کار را اعم از پوسته و افزونه های مختلف در زبان های مختلف و قابل توسعه منتشر نماید. این کار باعث می شود توسعه دهنده های مختلف از سراسر جهان و با زبان های مختلف، پوسته و افزونه های شما را ترجمه کنند و کار شما ابعاد جهانی پیدا کند.

در تابع بعدی () get_page_number شما متن های قابل ترجمه ای همانند زیر خواهید دید :

( ‘Page’ , ‘your-theme’)_

متن قابل ترجمه ما در اینجا Page میباشد که همراه با آدرس دایرکتوری پوسته ما همراه شده است. توجه داشته باشید نباید نام پوسته را از your-theme به چیز دیگری تغییر دهید.  آیا می توانید حدس بزنید که این تابع چکار می کند؟ اگر نگاهی به داخل تابع کنید خواهید فهمید که با کمک یک دستور شرطى If این تابع شماره صفحه ای که در آن قرار دارید را چاپ خواهد کرد.

در مرحله بعدی کد <head></head> را پیدا کنید و با کد زیر جایگزین نمایید:

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

در بخش دیگر اطلاعاتی از محتوای صفحه خود با کمک متا تگ ها به مرورگر میدهیم.

در خط بعدی صفحه خود را به فایل style.css متصل میکنیم.

در بخشی دیگر از کد، ویژگی نظردهی توسط کاربران سایت را فعال نموده و همچنین RSS ها را با کمک کدهای زیر تعریف نموده ایم:

در این مرحله می خواهیم به بخش بالایی سایتمان عنوان سایت (لینک به خانه)، توضیحات وبلاگ و سایت و منوها را قرار دهیم. فایل header.php را باز نموده و branding# را در کد پیدا نمایید. در اینجا ما عنوان و توضیحات مربوط به سایت و وبلاگ را اضافه خواهیم کرد. در اکثر پوسته های وردپرس به موتوهای جستجو اعلام می شود که عنوان صفحه مهمترین عنصر موجود در صفحه است. توسعه دهنده ها این کار را با کمک قرار دادن عنوان صفحه در تگ h1 انجام می دهند. به هر حال برای اجرای این بخش تنها از تگ های وردپرس و HTML استفاده می کنیم. کدهای این بخش را در زیر مشاهده می کنید.

اگر جزو توسعه دهندگان مبتدی هستید، توصیه می کنم سعی کند کد بالا را به دقت مطالعه و درک نمایید. من در این کد از تابعی به نام ()bloginfo استفاده کرده ام. از این تابع برای برای گرفتن URL بلاگ، تیتر و توضیحات بلاگ استفاده کرده ام. البته این تنها تمامی کاربردهای این تگ نیست. اگر این تگ را به دقت مطالعه نمایید بخش بزرگی از اتفاقاتی که در پوسته های وردپرس می افتد را می توانید درک نمایید. تاکنون با پوسته ساده ی HTML ای که نوشتیم و افزودن تگ های PHP و وردپرس پیش رفتیم و قدم به قدم در حال توسعه ی پوسته استاندارد و کاربردی خود هستیم. کمی به پایین تر می رویم و access# را پیدا می کنیم و کد زیر را اضافه می کنیم. این کد باعث می شود افرادی که از screen reader (همچون تبلت ها) ها استفاده می کنند منو ها را مشاهده نکنند و مستقیم مطالب را مشاهده کنند.

در مرحله بعدی سراغ افزودن منو ها می رویم. کد زیر ساده ترین کد ممکن برای افزودن منو ها است که تنها از یک آرگومان در آن استفاده شده است.

اگر بخواهیم یک جمع بندی کنیم باید گفت که در حال حاضر بخش access# باید به صورت زیر شده باشد :

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

 

1 نظر

ارسال نظر

آدرس ایمیل شما منتشر نخواهد شد.