پاسخ : آموزش طراحی قالب وردپرس #۱ اول کد زیر رو در header.php در هر جا خواستیم(ترجیحن بالا باشه مثلا زیر تگ title ) مینویسیم. کد: <?php load_theme_textdomain( ‘ tenet ‘ , get_template_directory() . ‘ / languages ‘ ) ; ?> </blockquote> این تابعی است برای افزودن قابلیت ترجمه به قالب و languages/ فولدری است به نام languages که در amoozesh قرار داره و فایل های mo و po زبان های مختلف در این فولدر قرار میگیرن. توضیح اینکه اگه بخواهیم فایلهای زبان تو خود فولدر amoozesh قرار بگیرن میتونیم از کد زیر استفاده کنیم: کد: <?php load_theme_textdomain( ‘ tenet ‘ , get_template_directory () ) ; ?> </blockquote> به همین راحتی! حالا اون tenet که نوشتم یعنی چی؟ اگه دقت کرده باشین بعضی از توابع e_ که نوشتم به صورت کد: <?PHP _e ( ‘ neveshteye morede nazar ‘ , ‘ tenet ‘ ) ?> </blockquote> هستن.(در فایل comment.php به این صورته چون فایل شلوغی بود خودم اینکارو کردم) این tenet همون tenet هست! یعنی باید این نوشته ها یکی باشن تا ترجمه به درستی انجام بشه!( به رنگها توجه کنید) خوب حالا وارد برنامه ی poedit میشیم که نصبش کردیم! میبینیم که در آخر تمام نوشته هایی که با استفاده از تابع e_ ساختیم رو خودکار لود میکنه و ما میتونیم عبارت هم معنی اون رو روبروی هر کدوم از عبارات بنویسیم. بعد از ذخیره کردن فایل وقتی میریم به صفحه ی اصلی سایت ترجمه ها انجام شده!(البته اگه وردپرس فارسی رو نصب کرده باشین) اما یک سری هم ترجمه نمیشن! دلیلش اینه که من توابع رو کامل ننوشتم بعنی مثلا فقط نوشتم : کد: <?PHP _e ( ‘ Edit ‘ ) ?> </blockquote> در صورتی که باید به صورت زیر مینوشتم: کد: <?PHP _e ( ‘ Edit ‘ , ‘ tenet ‘ ) ?> </blockquote> پس فهمیدیم که اون عبارت یا آرگومان دوم چقدر اهمیت داره! تنبلی هم نکنید کاری نداره عوضش یاد میگیرید حسابی! یک نکته، ترجمه ی F jS, Y رو j F y قرار بدید( این برای بهتر نشون دادن تاریخه) خوب از اونجایی که من هم طبق این آموزش دارم جلو میرم و هر کاری از شما میخوام خودم هم انجام میدم این کار رو هم کردم و حدود ۵ دقیقه طول کشید همه اش (البته با دوپینگ ++notepad) که بدوندقت کنید میتونید از منوی catalog منابع رو به روز رسانی کنید. البته از فایل من استفاده نکنید بهتره چون امکان خطا هست. خوب کار اصلی فارسی سازی این بود و فقط میمونه درست کردن صفحه! این کار رو فقط ماهایی که زبونمون برعکس همه ی دنیاست باید انجام بدیم و چند تا کشور برعکس دیگه و اون اینه که با استفاده از css نوشته ها رو از چپ به راست کنیم یا به اصطلاح rtl کنیم. برای اینکار وردپرس با پیگیری های یک امکان قرار داده که ما بدون دستکاری فایل اصلی style.css بتونیم کار خودمون رو راه بندازیم! چون اگه قرار بود اینو خراب کنیم دیگه زبونهای دیگه مشکل دار میشدن و با ایرانیها از اینی که هستن بهتر میشدن! بنابراین توضیحات بیخود میریم سراغ rtl.css که باید در فولدر amoozesh بسازیم و شروع کنیم قبل اینکه کدنویسی رو شروع کنیم اینو بگم که rtl.css بعد از style.css لود میشه و حرف آخر رو rtl میزنه بنابر این اگه ما مثلا در style.css و در تگ body فونت رو Arial قرار داده باشیم و در rtl.css فونت رو tahoma بزاریم در صفحه ی اصلی فونت tahoma خواهد بود! پس ما اگه بخواهیم یک ویژگی در style رو در زبان فارسی نداشته باشیم و یا به صورت دیگه ای داشته باشیم کافیه در rtl اون رو عوض کنیم! وارد صفحه ی اصلی سایت بشید و ببینید که نوشته ها از چپ به راست هستند و علامت ها و پرانتز ها در جای خودشون نیستن! بدون اینکه صفحه رو ببندید وارد rtl.css بشید و کد زیر رو بنویسید: کد: body{ direction:rtl; }</blockquote> فایل رو ذخیره کنید و به صفحه برگردین و F5 رو بزنید، میبینید که با همین یک خط نوشته ها از چپ به راست شد! این مهمترین مساله ی ما بود! حالا برای اینکه نوشته ها از سمت راست (سر خط!!) شروع بشن باید از کد زیر استفاده کنیم: کد: body{ direction:rtl; text-align:right; }</blockquote> ذخیره و بعد reload یا همون F5 میبینید که نوشته ها به سمت راست رفتن! چقدر زیباست! حالا فونت رو هم تغییر بدیم بد نیست! چون مناسب ترین فونت برای زبان فارسی tahoma است از اون استفاده میکنم: کد: body{ direction:rtl; text-align:right; font-family:Tahoma, Geneva, sans-serif; }</blockquote> از این راحت تر نمیشه! حالا کم کم سایتمون داره زیبا میشه، واقعا زیبا! چون underline یا خط زیر فونت در فارسی نه تنها زیبا نیست که بسیار هم زشت است! اون رو بر میدارم: کد: a:link, a:visited{ text-decoration:none; }</blockquote> ما هر جای سایت که بزنه تو ذوقمون و اونو کور کنه میتونیم عوض کنیم، اگه یادتون رفت یا سختتون بود که تگی که هدفتون هست رو پیدا کنید بهترین راه حل بی شک google chrome یا افزونه ی firebug فایرفاکس هستند که از ویژگی inspect elements استفاده میکنن و قبلا راجع به نحوهی کار توضیح دادم. کد: .sidebar ul li h2{ font-family:Tahoma, Geneva, sans-serif; font-size:12px; font-weight:600; } #commentform p{ direction:rtl; } #comment .textfield { text-align:right; } </blockquote> کار از اینجا به بعد دیگه کاملا سلیقه ای شده و بیشتر تفاوت در قالبهای مختلف از همینجا شروع میشه! من تا فردا صبح هم میتونم کد اضافه کنم اما دیگه باید اومدن به سایت منو فراموش کنید! دیگه باید خودتون دستاتونو کثیف کنید و وارد کار بشید(البته اگه تا حالا نشدید!) شما از این به بعد میتونین حتی سیستم هایی به جز وردپرس هم تغییر بدین. الان دید شما نسبت به قالب ها و سیستم های تحت وب عوض شده و فکر میکنید که میتونید همه چیز رو شخصی کنید! شما باید از سلیقه و ابتکار خودتون استفاده کنید و با رنگها، بردارها، فونتها و لوگوها و غیره و غیره استفاده کنید تا یک قالب شخصی بسازید و لذت به اشتراک گذاشتن اون رو بچشید!! فکر میکنم یک پست دیگه بنویسم که کار رو تموم کنم و یک سری ریزه کاری رو توضیح بدم و دیگر هیچ! اگه سوالی، جوابی چیزی بود مثل همیشه در خدمتم! مراقبت کنید از تن و روح با ارزشتون! بابای آپدیت: بعضی از دوستان پرسیده بودن بعضی از قسمت ها که نمیشه یک تابع رو اضافه کرد مثلا در قسمتcomment برای ترجه چه کاری باید انجام داد؟! به کد زیر دقت کنید: کد: <? php comments_popup_link (’No Comments’, ‘1 Comment ‘, ‘% Comments’); ? > </blockquote> ما میخواهیم ۳ آرگومان این تابع هم مثل توابع e_ آماده ی ترجمه بشن برای اینکار و با توجه به اینکه اطراف این آرگومان ها ‘ ‘ هست از __ استفاده میکنیم! کد: <?php comments_popup_link(__(’No comments’, ‘tenet’), __(’one comment’, ‘tenet’), __(’% comments’, ‘tenet’)); ?> </blockquote> و در نهایت باید چیزی شبیه به این داشته باشیم: دقت کنید که __ عبارت ترجمه شده رو با ‘ ‘ در تابع قرار میده و به این صورت تعداد نظرات به فارسی نمایش داده میشن.
پاسخ : آموزش طراحی قالب وردپرس #۱ فارسی سازی قالب های ورد پرس - آموزش طراحی قالب .رد پرس - جلسه 16 امروز روز آخریه که طراحی میکنیم یعنی جمع بندی یک سری نکات است که من توی این مدت یادداشت کردم که بگم. اول اینکه برای استفاده از نقل قول در نوشته ها میتونید روی علامت اون در قسمت ویرایش نوشته کلیک کنید و اون قسمت نوشته رو از بقیه متمایز کنید مثل زمان هایی که من کدها رو جدا میکنم. ویرایش گر با کلیک شما بر روی این علامت نوشته ی انتخاب شده رو داخل تگ blockqute قرار میده و حتما میدونید برای استایل یک تگ در css چه باید کرد: کد: <blockquote style="text-align: right;" dir="ltr"> blockquote{ margin:8px; } </blockquote> نکته: سعی کنید در فایل css اول از تگ های عمومی مثل body و مثلن تگهای h و blockquote شروع کنید، یعنی الان این کد رو بالاتر از wrapper بنویسید. یکم margin میدیم بهش تا از اطراف یک فاصله ای داشته باشه. کد: <blockquote style="text-align: right;" dir="ltr"> blockquote{ margin:8px; padding:8px 25px 8px 25px; } </blockquote> میتونید در فایل rtl هم padding دوم و چهارم (چپ و راست) رو تغییر بدین با ندین! همینطور میتونید رنگش رو عوض کنید و یک border دورش بکشید: کد: <blockquote dir="ltr"> blockquote{ margin:8px;padding:8px 25px 8px 25px; background:#999;border:1px #069 solid; } </blockquote> نکته ی کوچک دیگه اینه که میتونید button ها یا همون دکمه هاتون رو در تمام سایت به یک شکل در بیارین به ایسن صورت که به همه ی اونها یک کلاس اختصاص بدین مثل buttons و اونها رو به شکل مورد نظر تغییر بدین. در مورد navigation در single.php مثلا شما میخواهید در دو طرف به جای علامتهایی که قبلا نوشتیم ۲ عکس قرار بدین مثل شکل زیر: برای اینکار وارد single.php میشیم و کد زیر رو جایگزین کد نوشته شده در تگ navigation میکنیم: کد: <span class=”prev”><?php previous_post_link(’ %link’) ?></span> <span class=”next”><?php next_post_link(’ %link ‘) ?></span> <div class=”fixed”> </div> </blockquote> در اینجا لینک قبلی و بعدی رو جداگانه در تگهای span قرار دادیم. و در style.css کد زیر رو مینویسیم: کد: <blockquote dir="ltr"> .fixed{ clear:both; } .navigation .prev a { background:url(img/prev.gif) no-repeat; padding-left:22px; float:left; height:18px; line-height:16px; } .navigation .next a { background:url(img/next.gif) no-repeat; padding-right:22px; float:right; height:16px; line-height:16px; } </blockquote> img یک فولدر در amoozesh است. fixed فقط به منظور clear:both ساخته شده و سود دیگری ندارد! همونطور که میدونید یک سری از اینها سلیقه ای و یک سری نیمه واجبن! دیگه احتمالن خیلی راحت تر با این کدها بازی میکنید و من فقط راهنمایی میکنم. یک ترفند هم بگم مثلا شما یک منو در یک تم وردپرس میبینید که صفحات رو لیست میکنه(مثلا تم من) شما از اونجایی که تم رو دانلود کردید و همه ی فایلها رو دارین میتونین با استفاده از inspect elements اون قسمت و آی دی و غیره رو پیدا کنید و همچنین در فایل css تم قسمت های مربوط به منو رو در تم خودتون قرار بدین! از اونجایی که این تم ها معمولن رایگان هستند و دلیلی نداره برق رو دوباره اختراع کرد میتونید از این فایلها استفاده کنید. مثلا این منوی سایت من هست (تمی که در حال حاضر استفاده میکنم) و میتونید دانلود کنید و با یکسری تغییرات ازش استفاده کنید. در مورد سایدبار و تعداد اون! شما میتونید حتی در زیر سایت هم قسمتهایی مثل سایدبار درست کنید و از widget هم در اونها استفاده کنید. برای تعداد ساید بار تا اونجایی که من میدونم محدودیتی نیست! مثلا من اگه بخوام میتونم دو سایدبار در کنار هم داشته باشم برای اینکار به صورت زیر عمل میکنیم: اول وارد functions.php میشیم و عدد ۱ رو به ۲ تغییر میدیم و یا میتونیم مثل فایل زیر خودمون برای سایدبارها اسم بزاریم: اگر اسمی برای سایدبارها انتخاب نکنیم وردپرس اتوماتیک براشون اسم قرار میده (شماره بندی میکنه) و نیازی هم نیست که کار خاصی بکنید فقط کاری رو که در sidebar.php انجام دادیم تکرار میکنیم و کد زیر رو به انتهای sidebar.php اضافه میکنیم: کد: <div id=”right-sidebar” class=”sidebar”> <ul> <?php if ( function_exists(’dynamic_sidebar’) && dynamic_sidebar() ) : else : ?> <?php endif; ?> </ul> </div> </blockquote> همونطور که میبینید من یک آی دی هم اضافه کردم که برای css به دردمون میخوره. اگر function.txt رو که من نوشتم رو دانلود کردین لازمه که در sidebar.php 2 تغییر ایجاد کنید و همون نامهایی که در function هستند رو به سایدبار مربوطه به صورت زیر اضافه کنید: کد: <?php if ( function_exists(’dynamic_sidebar’) && dynamic_sidebar(‘left sidebar’) ) : else : ?> </blockquote> به همین راحتی!فقط مونده استایل کردن که باید خودتون بتونین انجام بدین یعنی مثلا width رو در sidebar. تعییر بدین و نصف کنید یا از این قبیل کار ها مورد دیگه به داشبورد مربوط میشه و قسمت نمایش یا appearance که تم ها در اون قرار دارن اگه میخواهید عکس تمتون در این صفحه سفید نباشه و نمایش داده بشه میتونید با هر برنامه ای خواستید عکسی از صفحه ی اصلی سایت بگیرید و با ابعاد مناسب در فولدر آموزش به اسم screenshot قرار بدین مثل این این هم از این،برای فارسی کردن فرم نظر دهی (برای کامپیوتر هایی که کیبورد فارسی ندارند) به سایت برین و آموزش موجود در اون رو بخونید و farsitype.js رو هم دانلود کنید و طبق آموزشهایی که قبلن گفته شده در هدر include کنید.(من قبلا فرم نظردهی رو با این اسکریپت سازگار کردم) و احتمالن مشکلی نخواهید داشت! و آخرین نکته ای که به ذهنم رسیده و میرسه اینه که بتونید از __ برای ترجمه ی قسمتهایی از توابع php موجود استفاده کنید. مثلا برای نمایش فارسی تعداد نظرات در زیر هر پست میتونید به شکل زیر عمل کنید و کد زیر رو جایگزین خطی کنید که مربوط به نمایش لینک نظر دهی در postmetadata در فایلهایی مثل index.php بود: کد: <?php comments_popup_link(__(’No comments’, ‘tenet’), __(’one comment’, ‘tenet’), __(’% comments’, ‘tenet’)); ?> </blockquote> تابع __ مثل e_ عمل میکنه و کارش تقریبن همونه پس چیز خاصی نیست! با رفتن به languages و باز کردن فایل زبان میتونید با بارگذاری مجدد اضافه شدن این سه رشته یا نوشته رو ببینید. iran_forum.ir
