نحوه ایجاد قالب کودک وردپرس (ویدئو)

Google Chrome و Firefox با ابزارهای داخلی برای بازرسی ارائه می شوند. این ابزارها به شما امکان می دهند HTML و CSS پشت هر عنصر یک صفحه وب را مشاهده کنید.

اگر می خواهید CSS مورد استفاده برای منوی پیمایش را مشاهده کنید ، کافیست ماوس را به منوی پیمایش برده و برای انتخاب Inspect Element کلیک راست کنید.

با این کار صفحه مرورگر شما به دو قسمت تقسیم می شود. در قسمت پایین صفحه ، HTML و CSS را برای صفحه مشاهده خواهید کرد.

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

همچنین قوانین CSS مربوط به عنصر برجسته شده در پنجره سمت راست را به شما نشان می دهد.

می توانید ویرایش CSS را در آنجا امتحان کنید تا ببینید چگونه به نظر می رسد. بیایید سعی کنیم رنگ پس زمینه .navbar را به # e8e5ce تغییر دهیم.

خواهید دید که رنگ پس زمینه نوار پیمایش تغییر خواهد کرد. اگر این را دوست دارید ، پس می توانید این قانون CSS را کپی کرده و در فایل Style.css Child Theme خود جای گذاری کنید.

.navbar {
background-color: # e8e5ce؛
}

تغییراتی را که در فایل style.css ایجاد کرده اید ذخیره کرده و سپس سایت خود را پیش نمایش کنید.

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

/ *
 نام قالب: تم ​​کودک WPB
 تم URI: https://www.wpbeginner.com
 توضیحات: یک موضوع کودک بیست و سیزده
 نویسنده: WPBeginner
 نویسنده URI: https://www.wpbeginner.com
 الگو: بیست و سیزدهم
 نسخه: 1.0.0
* /

import url ("../ 20ththirteen / style.css")؛

.عنوان سایت {
بالشتک: 30px 0 30px؛
}

.site-header .home-link {
حداقل ارتفاع: 0px؛
}

.navbar {
background-color: # e8e5ce؛
}

.ویجت {
background-color: # e8e5ce؛
}
.site-footer {
background-color: # d8cdc1؛
}
.site-footer .sidebar-container {
background-color: # 533F2A
}

ویرایش پرونده های الگو h4>

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

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

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

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

به عنوان مثال ، شما می خواهید پیوند “Powered by WordPress” را از قسمت پاورقی حذف کرده و یک اخطار کپی رایت در آنجا اضافه کنید. به سادگی فایل footer.php را در طرح زمینه فرزند خود کپی کرده و سپس آن را در یک ویرایشگر متن ساده مانند دفترچه یادداشت باز کنید. خطوطی را که می خواهید حذف کنید پیدا کنید و آنها را با خطوط خود جایگزین کنید. مانند این:

در این کد ، ما بیست سیزده اعتبار را با توجه به حق نسخه برداری جایگزین کرده ایم.

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

افزودن قابلیت جدید به طرح زمینه کودک h4>

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

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

ما قبلاً با ویرایش تصویری پیش فرض Twenty Thirteen ، یک تصویر هدر و یک تصویر کوچک ایجاد کرده ایم. بعد ، آن را در پوشه طرح زمینه کودک خود بارگذاری کردیم.

بعد از آن ما باید به وردپرس بگوییم که از این تصویر به عنوان تصویر هدر پیش فرض برای تم ما استفاده کند. ما می توانیم این کار را با اضافه کردن این قطعه کد در پرونده functions.php قالب کودک خود انجام دهیم:

 '٪ s / images / headers / circle-wpb.png'))؛

Register_default_headers (آرایه (
'caramel' => آرایه (
'url' => '٪ 2 $ s / images / headers / circle-wpb.png'،
'thumbnail_url' => '٪ 2 $ s / images / headers / circle-wpb-thumbnail.png'،
'description' => __ ('کارامل' ، 'سربرگ کارامل' ، 'بیست و سیزدهم')
) ،
))

}
add_action ('after_setup_theme'، 'wpbdemo_custom_header_setup')؛
؟>

اکنون اگر به ظاهر »هدر سر بزنید ، می توانید تصویری را که اضافه کردیم به عنوان تصویر پیش فرض مشاهده کنید.