آموزش فارسی سازی پوسته های وردپرس – قسمت پایانی

daskhatmin فواد طهماسبی
31,290 بازدید
آموزش فارسی سازی پوسته های وردپرس

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

با توجه به مطالبی که در قسمتهای قبلی فارسی سازی پوسته های وردپرس گفته شد، شما الان باید یک فایل “rtl.css” که شامل تغییرات صورت گرفته روی فایل استایل اصلی است، یک پوشه  “rtl-images” که حاوی تمام تصاویر تغییر یافته به نسخه راست چین تصویر میباشد و دو فایل زبان به نامهای “fa_IR.po” و “fa_IR.mo” که ترجمه فایل های زبان پوسته مورد نظر هست را داشته باشد. (اگر این فایلها را ندارید میتوانید به قسمت سوم آموزش فارسی سازی پوسته های وردپرس مراجعه کنید)

خوب! الان زمان آن رسیده که ساختن پوسته فرزند رو شروع کنیم. برای این کار یک فولدر در کنار فولدر مربط به پوسته مادر ایجاد کرده و نام آن را هر چیزی که دوست داشتید بگذارید،مثلا “myChildTheme”. برای درک بهتر ساختار شاخه ها به ساختار زیر توجه کنید:

- site_root (www)
    - wp-content
        - themes (فولدر مربوط به تمام پوسته ها)
            - parentTheme (فولدر مربوط به پوسته مادر)
            - myChildTheme (فولدر مربوط به پوسته فرزند)
                - style.css (فایل استایل مربوط به پوسته فرزند)

حال برای ایجاد پوسته فرزند باید یک فایل با نام “style.css” در داخل فولدر مربوط به پوسته فرزند ایجاد کنید و کد زیر را در داخل آن ذخیره کنید:

/*
Theme Name:     myChildTheme
Theme URI:      https://daskhat.ir/
Description:    Child theme for the parentTheme 
Author:         Foad Tahmasebi
Author URI:     https://daskhat.ir/foad
Template:      parentTheme
Version:        0.1.0
*/

حالا شما یک پوسته دارید با نام “myChildTheme” که میتوانید آن را از سمت مدیریت وردپرس فعال کنید. ولی این پوسته هیچ استایلی ندارد و برای برطرف کردن این مشکل باید فایل “style.css” مربوط به پوسته مادر را در فایل استایل پوسته فرزند فراخوانی کنید. برای این کار کد زیر را در فایل “style.css” مربوط به پوسته فرزند وارد کنید:

@import url("../parentTheme/style.css");

الان اگر وبسایتتان را بازبینی کنید متوجه میشوید که پوسته فرزند تمام خصوصیات پوسته مادر را دارد.  حال نوبت به استفاده از فایلهای ایجاد شده در مراحل قبلی میرسد. فایل “rtl.css” و فولدر “rtl-images” را که قبلا ایجاد کرده بودید را در داخل فولدر مربوط به پوسته فرزند قرار دهید. بعد از این کار، فایل “rtl.css” را باز کرده و آدرس تمامی تصاویر تغییر داده شده را به صورت زیر تغییر دهید:

از:
url(images/quote.png) 
به:
url(rtl-images/quote.png)

تا اینجای کار پوسته فرزند شما به خوبی ایجاد شده و کار خواهد کرد، تنها چیزی که مانده ترجمه متنهای پوسته هست. برای این کار نیز باید یک فولدر با نام “languages”  داخل فولدر مربوط به پوسته فرزند ایجاد کرده و فایلهای مربوط به ترجمه پوسته را که در ابتدای مطلب اشاره شد در این فولدر قرار دهید. حالا برای استفاده از این فایلها باید یک فایل با نام “functions.php” در فولدر مربوط به پوسته فرزند ایجاد کرده و کد زیر را در آن کپی کنید:

<?php
/**
 * Setup My Child Theme's textdomain.
 *
 * Declare textdomain for this child theme.
 * Translations can be filed in the /languages/ directory.
 */
function my_child_theme_setup() {
	load_child_theme_textdomain( 'myChildTheme', get_stylesheet_directory() . '/languages' );
}
add_action( 'after_setup_theme', 'my_child_theme_setup' );
?>

توجه کنید که “myChildTheme” نام پوسته شما میباشد. فایل “functions.php” بعد از فایل توابع مربوط به پوسته مادر بارگذاری میشود و اگر خواستید، میتوانید کدهای مربوط به توابع پوسته فرزند را داخل این فایل ذخیره کنید.

ایجاد پوسته فرزند، برای فارسی سازی شده پوسته مادر، به پایان رسیده و میتوانید از آن استفاده کنید. برای درک بهتر ساختار یک بار دیگر ساختار مربوط به پوسته فرزند را میبینیم:

- site_root (www)
    - wp-content
        - themes (فولدر مربوط به تمام پوسته ها)
            - parentTheme (فولدر مربوط به پوسته مادر)
            - myChildTheme (فولدر مربوط به پوسته فرزند)
                - languages (فولدر مربوط به فایلهای زبان)
                    - fa_IR.mo
                    - fa_IR.po
               - functions.php (توابع اضافی مربوط به پوسته فرزند)
               - rtl.css (فایل استایل راست چین سازی استایل اصلی)
               - style.css (فایل استایل مربوط به پوسته فرزند)

 نکته: همانطور که متوجه شدید، تغییری در فایلهای مربوط به پوسته مادر ایجاد نشد و کل تغییرات در پوسته فرزند اعمال گشت. بنابراین در بروزرسانی های بعدی مشکلی برای پوسته شما ایجاد نخواهد شد و شما میتوانید به راحتی پوسته اصلی را بروز کرده و از امکانات جدید آن لذت ببرید.

همین! کل داستان فارسی سازی پوسته های وردپرس به صورت کاملا استاندارد بود. به نظر شما آسون نیست؟ 😉


منابع بیشتر برای مطالعه بیشتر در مورد پوسته های فرزند:

http://codex.wordpress.org/Child_Themes
http://wpmu.org/how-to-create-a-wordpress-child-theme-in-3-steps

قسمت اولقسمت دومقسمت سوم – قسمت چهارم

daskhatmin

فواد طهماسبی

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

73 دیدگاه برای “آموزش فارسی سازی پوسته های وردپرس – قسمت پایانی”

  1. mohammad گفت:

    لطفا فیلم این آموزش با زبان ساده درست کنید

  2. فریده گفت:

    سلام.من سایتی باوردپرس طراحی کرده ام وازپوسته frontierاستفاده کردم مشکلی که دارم اینه که متن که میزارم دکمه ادامه مطلب انگلیسیه(Readpost) مخاستم بدونم چطومیشه ویرایشش کنم وفارسی (ادامه مطلب)بنویسم

  3. صدرا گفت:

    سلام
    خسته نباشید
    مطلب خیلی خوبی هست. فقط یک سوال.
    من یک پوسته دارم که بعضی از قسمت ها رو نمیشه از rtl.css تغییر داد . باید از همین راه استفاده کنم. من داخل پوسته فرزندم فقط یک فایل style.css دارم . کد های داخلش هم نوشته شده و آماده است.
    حالا من وقتی پوسته فرزند رو به جای پوسته اصلی فعال میکنم پوسته بهم میریزه. میشه لطفا راهنمایی کنید ؟
    ممنون

  4. مهران گفت:

    بهترین آموزشی که تا به حال دیدم ، ساده و روان و کاربردی ! بی نهایت تشکر …

  5. ناصر گفت:

    سلام مهندس جان
    خیلی ممنون بابت آموزش کاملتون ، فقط یه سوال دارم ، اونم اینه که من وقتی میخوام پنل تنظمیمات قالبو فارسی کنم ، تو poedit بعضی از کلمات پنل رو پیدا نمیکنه ، مشکل چیه؟ باید تابع خاصی اضافه کنم؟

  6. سمیه گفت:

    یه اشتباه کوچیکی کردم ، قالب اصلی رو اگه فایل های زبان رو توش بزارم درسته ولی قالب فرزند رو اصلا فارسی نشون نمیده . من فکر کردم از پلاگین هاست ولی نه مربوط به خود پوسته فرزنده .

  7. سمیه گفت:

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

  8. سینا گفت:

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

  9. مصطفی گفت:

    سلام

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

    و یک سوال خیلی ضروری دارم که ممنون میشم پاسخ بدید:
    پنل تنظیمات پوسته را چطور باید راست چین و ترجمه کرد که با بروزرسانی به مشکل برنخوریم ؟

    یا علی

  10. محمد گفت:

    ممنون بابت اموزش،یه سوال:
    پنل تنظیمات پوسته رو چطور باید فارسی سازی کرد؟!!
    توی ترجمه ریشه ها پنل هم فارسی میشه؟
    ممنون میشم یه توضیح کوچیک بدید 🙂

  11. کوروش گفت:

    با سلام خدمت شما
    بنده یک فایل css دارم که از طریق php فراخوانی میشه .به شکل زیر
    wp_enqueue_style( ‘avia-media-style’ , AviaBuilder::$path[‘assetsURL’].’css/avia-media.css’);
    میشه بگید در پوسته فرزندذ اون رو باید چه طور فراخوانی کنم؟
    چرا که وقتی در فایل استایل موجود در پوسته فرزند مشخصه ها رو وارد می کنم تغییر حاصل نمیشه.
    با احترام

  12. کوروش گفت:

    باسلام خدمت شما
    آقا ممنون میشم اگر مقدور هست پاسخ من رو بدید.
    با احترام

    1. فؤاد طهماسبی گفت:

      سلام،
      – طرز کار css فرزند، یا کلا فرزند اینطوریه که شما تمام مشخصاتی که تو والد تعریف شده رو با استفاده از فرزند override میکنید. یعنی اینکه برای تغییر یک مشخصه css که قبلا تعریف شده میتونید تو آخرین css ای که لود میکنید دوباره دقیقا همون مشخصه رو تعریف کنید ولی اینبار اونطوری که میخواهید.
      – در حالت فرزند سرعت لود تفاوت چشمگیری نداره شاید در حد چند هزارم ثانیه یا نهایتا چند صدم 🙂
      – اینکه شما بجای ایمپورت بیاید مستقیم رو یک فایل بنویسید همه css هارو کار درستیه از نظر سرعت. به خاطر اینکه import سمت کاربر اتفاق میفته و باعث میشه یه درخواست http دیگه به سرور ارسال شه و این باعث طولانی شدن لود میشه. (یعنی سعی ما در طراحی بهینه سایت، کم کردن تعداد دفعات درخواست http هست.)

      یه نکته اینکه سرعت در حالت فرزند رو با سرعت در import رو اشتباه نگیرید. حالت فرزند تنها تفاوتی که داره اینه که سمت سرور چند دستور بیشتر داره اجرا میشه و بعد از پایان فایلهای لازم به نمایش سایت به سمت کاربر ارسال میشه. (در واقع یه سرعت لود داریم، یه سرعت پردازش). فرزند روی سرعت پردازش تاثیر میذاره(ولی به هیچ وجه محسوس نیست) و import روی سرعت لود تاثیر میذاره چون سمت کاربره.

  13. کوروش گفت:

    با سلام خدمت شما
    خیلی ممنون از وقتی که گذاشتید و ممنون از راهنماییتون.
    ایمپورت کردن مشکل فایل shortcodes.css را حل کرد. اما فایل مشکل فایل avia_admin.css رو حل نکرد.
    یعنی وقتی من فایل مورد نظر رو با رعایت پوشه بندی ایمپورت و آدرس دهی می کنم. تغییرات اعمال نمیشه.
    وقتی هم با نرم افزار noteopad ++ جستجو می کنم به تنها نتیجه زیر می رسم.
    wp-content\themes\aks2aks\framework\php\class-megamenu.php
    Line 58: wp_enqueue_style( ‘avia_admin’, AVIA_CSS_URL . ‘avia_admin.css’);
    یه سوال دیگه داشتم اونم اینکه آیا پوسته فرزند زمان بارگذاری سایت رو به نسبت حالت بدون فرزند زیاد می کنه؟
    سوال بعدیم هم اگر پرویی نباشه !!
    من داخل لینک زیر :
    http://codex.wordpress.org/Child_Themes
    انتهاش که میگه “About @import url in CSS”
    به مطلبی برخوردم که می گه اگر شما به جای ایمپورت یه سری کد اضافه کنی سرعت به نسبت بهتر میشه.
    اما نمی دونم کدا رو کجا باید وارد کنم و چه جوی فایل های استایل رو بهش معرفی کنم.
    با تشکر از پیگیری شما.

  14. کوروش گفت:

    با سلام خدمت شما
    با نرم افزار notepad ++ پوشته پوسته مورد نظر رو با عبارت shortcodes.css جستجو کردم. تا ببینم کجا از این فایل نام برده شده. که نتایجش رو بیراتون گذاشتم.
    اما متاسفانه بقیشو دیگه سر در نمیارم.
    ممنون میشه راهنمایی کنین.
    با احترام

    1. فؤاد طهماسبی گفت:

      الان متوجه شدم کامنت قبلی چیه، آقا شما در فایل style مربوط به فرزند، بعد از اینکه فایل استایل مادر رو import کردید، این فایل shortcode.css رو هم import کنید. البته یه کپی از فایل مورد نظر رو بیارید تو پوشه فرزند و اونو import کنید، و هر تغییری میخواهید رو فایلی که تو پوشه فرزند هست اعمال کنید.

  15. کوروش گفت:

    با سلام خدمت شما
    در پوشته والد پوسته بنده فایلی به نام shortcodes.css واقع در پوشه css موجود است.
    بنده در پوشه پوسته فرزند پوشه ی css رو ایجاد کردم و فایلی هم نام با فایل اصلی ایجاد کردم اما زمانی که تغییراتی در فایل css فرزند می دم تغیرات اعمال نمیشه.
    همین مشکل رو بنده با فایل css مربوط به قسمت مدیریتی وردپرس نیز دارم.(admin.css )
    ممنون میشم ر اهنمایی نمایید.
    با احترام

    1. فؤاد طهماسبی گفت:

      سلام،
      این فایل یه جایی فراخوانی شده (احتمالا style.css) شما هم باید تو فایل استایل فرزند فراخوانی کنید. فقط بودن فایل کافی نیست.

  16. ali گفت:

    سلام واقعا آموزش عالی بود ، یک دنیا تشکر
    فقط یک سوال ، توی نظرات خوندم چیزی نیافتم ممنون میشم که راهنمایی کنید.
    مثلا پوسته ای که راستچین و فارسی شده پیشفرض مثل صحیفه نسخه 4.3.1 ، اگر بخوایم پنل تنظیمات مثلا TIE panel رو فارسی کنیم باید کدوم فایل رو ویرایش ؟
    پیشاپیش ممنونم از راهنماییتون

    1. فؤاد طهماسبی گفت:

      متاسفانه تای پنل چند زبانه نیست و برای این کار باید فایلهای اصلی رو دستکاری کنید.

  17. کوروش گفت:

    با سلام خدمت شما
    ممنون از آموزشتون.
    بنده با فارسی سازی دو مشکل داشتم
    اول اینکه برخی از عبارات داخل پوسته هست که در فایل ترجمه نیست برای ترجمه.مثلا عبارت comment و وقتی این عبارت رو دال فایل های پوسته جستجو می کنیم. در چندین فایل php دیده میشه که نمی ارزه دونه دونه فایل ها رو تغییر داد.
    دوم اینکه وقتی من پنل مدیریت پوسته رو می خوام فارسی کنم. ایکون عباراتی که قبلا تو انگلیسی بود . تو فارسی نیست.
    لینک زیر رو مشاهده کنید.
    http://uplod.ir/rbf4adz9vmh1/%D8%B4%D8%B4.png.htm
    ضمنا در برخی پوسته های دیگه زمانی که آیتی از پنل مدیریت رو فارسی می کنیم عبارت فارسی شده نشون داده نمیشه.

    1. فؤاد طهماسبی گفت:

      سلام،
      1- اینو نمیشه کاریش کرد، یعنی به صورت ساده نوشته شده تو کد یا با توابع ترجمه مثل __() نوشته شده ولی تو فایل ترجمه نیست؟
      2- تا حالا این مورد برای من پیش نیومده، تو کروم روش راست کلیک کنید و Inspect Element رو بزنید. از پنل سمت راست گزینه های استایل رو یکی یکی بردارید (به غیر از عکس) احتمالا با هاش کمی ور برید پیدا میکنید مشکل از کجاست.
      3- بعد از فارسی کردن اگر این اتفاق افتاد یکبار پوسته رو غیرفعال کنید دوباره فعال کنید. اگر درست نشد فایل ترجمه ایراد داره.

  18. محمد علی گفت:

    سلام
    مرسی از آموزشتون.
    یه سوال:
    short code ها رو چه طوری باید rtl کرد مثلا progress bar یا tabular

    مرسی

    1. فؤاد طهماسبی گفت:

      سلام،
      اینا رو باید از داخل کدشون که معمولا تو فایل functions.php هستن راست چین کنید.
      البته معمولا این تگها هم در استایل شیت اصلی استایل داده میشه.

  19. فرهاد گفت:

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

    1. فؤاد طهماسبی گفت:

      سلام، اول وردپرس فارسی نصب کنید. 😉
      یعنی شما خودتون پوسنه رو چند زبانه کردید؟ یا بوده و شما فقط ترجمه کردین؟ اگر حالت دوم درسته که لازم نیست کاری انجام بدید(البته همه کارایی که باید انجام شه تو آموزش هست.) و اگه حالت اول درسته بهتره یه نگاه به پوسته 2014 بکنید. (نا گفته نماند که الان، تمام پوسته های سری پیشفرض وردپرس بر پایه _S نوشته شدن. همون Under Score پیشنهاد میکنم هنگام ساخت پوسته از این پوسته کمک بگیرید.)
      این کد دقیقا کد به کار رفته در پویته 2014 است:

      	/*
      	 * Make Twenty Fourteen available for translation.
      	 *
      	 * Translations can be added to the /languages/ directory.
      	 * If you're building a theme based on Twenty Fourteen, use a find and
      	 * replace to change 'twentyfourteen' to the name of your theme in all
      	 * template files.
      	 */
      	load_theme_textdomain( 'twentyfourteen', get_template_directory() . '/languages' );
      

      نحوه ساختار پوشه زبان رو هم در پوسته 2014 ببینید.

  20. eliaszahiri گفت:

    مطلب جالبی بود

دیدگاه‌های بیشتر

*اگر پرسشی دارید که مربوط به این مطلب نیست لطفا در بخش پرسشها مطرح کنید. در غیر این صورت دیدگاه شما تایید نخواهد شد.


کد HTMLCSSJavaScriptPHP