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

Add_action ("admin_init"، "mytheme_add_init"); add_action ("admin_menu"، "mytheme_add_admin");

این کد یک صفحه اضافی به داشبورد وردپرس شما اضافه می کند.

مرحله 9

عالی است، اکنون ما صفحه کنترل خود را داریم، با یک آیتم منوی جداگانه. با این حال، با بازدید از این صفحه، می بینیم که همه چیز آنطور که ما می خواهیم خوب نیست. اما مهم نیست، ما یک کمک بزرگ داریم - CSS! یک پوشه جدید "functions" در داخل پوشه nettuts ایجاد کنید. در داخل این پوشه، یک فایل جدید - functions.css ایجاد کنید و کد زیر را در آن قرار دهید:

Rm_wrap (عرض: 740 پیکسل؛) rm_section (حاشیه: 1px جامد #ddd؛ حاشیه پایین: 0؛ پس‌زمینه: # f9f9f9;) برچسب .rm_opts (اندازه قلم: 12 پیکسل؛ وزن قلم: 700؛ عرض: نمایشگر: 200p : بلوک؛ شناور: سمت چپ؛) rm_input (بالشتک: 30px 10px؛ حاشیه پایین: 1px جامد #ddd؛ حاشیه بالا: 1px جامد #fff;) .rm_opts کوچک (نمایش: بلوک؛ شناور: سمت راست؛ عرض: 200px ؛ رنگ: # 999؛) ورودی .rm_opts، .rm_opts انتخاب (عرض: 280 پیکسل؛ اندازه قلم: 12 پیکسل؛ بالشتک: 4 پیکسل؛ رنگ: # 333؛ ارتفاع خط: 1em؛ پس‌زمینه: # f3f3f3؛) .rm_ورودی فوکوس، .rm_input area text: فوکوس (پس‌زمینه: #fff;) .rm_input area text (عرض: 280px؛ ارتفاع: 175px؛ اندازه قلم: 12px؛ padding: 4px؛ رنگ: # 333؛ ارتفاع خط: 1.5em؛ پس‌زمینه: # f3f3f3;) .rm_title h3 (مکان نما: اشاره گر؛ اندازه قلم: 1em؛ تبدیل متن: بزرگ؛ حاشیه: 0؛ وزن قلم: پررنگ؛ رنگ: # 232323؛ شناور: سمت چپ؛ عرض: 80%؛ بالشتک: 14px 4px;) .rm_title (مکان‌نما: اشاره‌گر؛ حاشیه پایین: 1px جامد #ddd؛ پس‌زمینه: #eee؛ padding: 0;) .rm_title h3 img.inactive (حاشیه: -8 px 10px 0 2px; عرض: 32 پیکسل؛ ارتفاع: 32px; پس زمینه: url ("تصاویر / pointer.png") بدون تکرار 0 0; شناور به سمت چپ؛ -moz-border-radius: 6px; حاشیه: 1px جامد #ccc; ) .rm_title h3 img.active (حاشیه: -8px 10px 0 2px؛ عرض: 32px؛ ارتفاع: 32px؛ پس‌زمینه: url ("تصاویر / pointer.png") بدون تکرار 0 -32px؛ شناور: چپ؛ -moz- border-radius: 6px; -webkit-border-radius: 6px; border: 1px solid #cccc;) .rm_title h3: hover img (حاشیه: 1px solid # 999;) .rm_title span.submit (نمایش: block; شناور: سمت راست؛ حاشیه: 0؛ بالشتک: 0؛ عرض: 15 درصد؛ لایه‌بندی: 14 پیکسل 0؛). align: center;) .rm_table th، .rm_table td.feature (رنگ حاشیه: # 888;)

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

مرحله 10

اکنون که یک فایل CSS آماده داریم، اگر دسترسی مستقیم به بخشی از سند نداریم، چگونه می توانیم آن را به صفحه متصل کنیم. ? به خاطر دارید که ما یک تابع خالی mytheme_add_init () ایجاد کردیم؟ او فقط چیزی است که به ما کمک می کند. آن را به صورت زیر تغییر دهید:

تابع mytheme_add_init () ($ file_dir = get_bloginfo ("template_directory")؛ wp_enqueue_style ("functions"، $ file_dir. "/ Functions / functions.css"، false، "1.0"، "all");)

این کد شامل فایل functions.css در قسمت document می شود ... محل فایل توسط پوشه قالب تعیین می شود.

مرحله 11

به صفحه ما سر بزنید خیلی خوب به نظر می رسد، تنها چیزی که باقی می ماند اضافه کردن قابلیت به نمادهای پلاس در سرفصل های بخش است. برای این کار از jQuery استفاده خواهیم کرد. یک فایل rm_script.js جدید در داخل پوشه nettuts / functions / ایجاد کنید. در کد زیر قرار دهید:

JQuery (document) .ready (function () (jQuery (. Rm_options"). SlideUp (); jQuery (. Rm_section h3"). روی (function () (if (jQuery (this) .parent (). بعدی (.rm_options). غیر فعال "). addClass ("فعال")؛) else (jQuery (این) .removeClass ("فعال"). addClass ("غیرفعال"). بچه ها ("img"). removeClass ("فعال"). addClass (" غیر فعال ");) jQuery (این) .parent (). بعدی (". rm_options "). slideToggle (" کند");));));

این کد چه کاری انجام می دهد؟ پس از بارگیری DOM، تمام بلوک های دارای کلاس "rm_options" جمع می شوند. سپس با کلیک بر روی آیکون مثبت، کلاس “غیر فعال” حذف می شود و کلاس “active” اضافه می شود که علامت منفی جایگزین آیکون می شود. وقتی دوباره روی این آیکون کلیک کنید، روند معکوس رخ می دهد. برای تا کردن / باز کردن بلوک ها، از یک تابع نسبتاً ساده jQuery slideToggle استفاده می شود. برای اتصال این اسکریپت به صفحه، از تابع آشنای mytheme_add_init () استفاده می کنیم، آن را به صورت زیر تغییر می دهیم:

تابع mytheme_add_init () ($ file_dir = get_bloginfo ("template_directory")؛ wp_enqueue_style ("functions", $ file_dir. "/ Functions / style.css"، false، "1.0"، "all")؛ wp_enqueue_script ("rm_script"، $ file_dir. "/ functions / script.js"، false، "1.0")؛

پس از آن، اسکریپت باید کار کند. بررسی کنید که چگونه در صفحه به نظر می رسد:

مرحله 12

اکنون که صفحه تنظیمات ما کاملاً آماده است، در مورد استفاده از خود تنظیمات باید کمی بیشتر توضیح دهیم. کد استفاده از پارامترها به صورت زیر است:

$ var = get_option ("nt_colur_scheme");

با کمک آن می توانیم تغییری در رنگ بندی سایت اعمال کنیم. خیلی ساده است:

/ * فایل CSS را بسته به رنگ انتخابی تغییر دهید * / /.css "/> / * نمایش متن در فوتر، می توانید از تگ های HTML استفاده کنید * /

دامنه فقط توسط تخیل شما محدود شده است.

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

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

تنظیم قالب (قالب) وردپرس.

بیا بریم تو نوار ابزار() وردپرس و ما به مطالعه آن ادامه خواهیم داد و تمام نکات بخش "طراحی" را که وظیفه ظاهر و ویرایش قالب وردپرس را بر عهده دارد را بررسی خواهیم کرد:

تب بعدی "ابزارک" است. وقتی به آن سوئیچ می کنید، تصویر زیر در مقابل ما باز می شود:

در سمت چپ ما همه چیز را می بینیم ویجت های موجود“: RSS، آرشیو، تقویم، یافتن، برچسب ابری، آخرین پست ها، دسته بندی ها، متن، و غیره. نوار کناری وبلاگ به صورت شماتیک در سمت راست نشان داده شده است. بسته به ساختار ساختار قالب وردپرس، می تواند یک یا چند نوار کناری وجود داشته باشد. در یک وبلاگ، به نظر می رسد یک نوار کناری در سمت راست یا چپ، و احتمالاً در هر دو طرف در یک زمان قرار دارد.

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

آنچه که هر یک از ویجت ها مخفف آنها هستند به اندازه کافی از نام آنها مشخص است. ویجت "متن" شایسته توجه ویژه است. با انتقال آن به نوار کناری، فیلدهای ورودی داده و عنوان باز می شود. در اینجا می توانید متن ساده با تصاویر و کدهای HTML مختلف را وارد کنید. به عنوان مثال، شمارنده‌های آمار، واحدها و بنرهای تبلیغاتی، فرم‌های اشتراک و غیره. پس از پر کردن یا ویرایش ویجت «متن»، روی دکمه «ذخیره» کلیک کنید تا تغییرات اعمال شوند. می‌توانید ویجت‌های غیرضروری را با کلیک کردن روی دکمه «حذف» یا کشیدن آنها به «حذف کنید. ویجت های موجود". اگر نیاز به غیرفعال کردن موقت یک ویجت دارید، در حالی که تمام تنظیمات آن را برای استفاده در آینده ذخیره می کنید، این ویجت را به سمت چپ و پایین بکشید تا به " ویجت های غیر فعال". شما می توانید آن را در هر زمان برگردانید.

سپس تب "منو" می آید. با باز کردن آن، به صفحه ایجاد منوی وبلاگ خود با توضیح دقیق نحوه انجام آن می‌رسیم. در منو می‌توانید دسته‌ها، صفحات و پیوندهای دلخواه را با مرتب کردن آنها به ترتیب مورد نیاز با کشیدن و رها کردن وارد کنید. با کلیک بر روی دکمه "ذخیره منو"، منوی وبلاگ ایجاد می شود.

برای اینکه منوی ایجاد شده در نوار کناری ظاهر شود، باید به تب "ویجت ها" بروید و ویجت را بکشید. منوی شخصی"در نوار کناری. بر این اساس، اگر ویجت‌های «دسته‌ها» و «صفحات» را در وبلاگ خود فعال کرده باشید، می‌توانید آن‌ها را غیرفعال کنید. باید بگویم که افراد کمی از منوی وبلاگ استفاده می کنند.

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

بنابراین، ما بخش "طراحی" را در پنل مدیریت وبلاگ خود مطالعه کردیم و تنظیمات قالب (قالب) وردپرس را مشخص کردیم.

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

گاهی اوقات تنظیمات سفارشی برای قالب وردپرس به عنوان موارد جداگانه در بخش "طراحی" یافت می شود.

نحوه سفارشی‌سازی یک تم خاص باید در وب‌سایت توسعه‌دهنده یا بومی‌ساز قالب که آن را از آن دانلود کرده‌اید، با جزئیات شرح داده شود. سفارشی‌سازی قالب وردپرس به شما این امکان را می‌دهد تا به راحتی، بدون تداخل با کد منبع قالب، عناصر طراحی سایت (لوگو، پس‌زمینه، فونت‌ها، مکان‌های نوار کناری و غیره) را تغییر دهید، بنرها، دکمه‌های رسانه‌های اجتماعی و RSS، شمارنده‌های آمار را درج کنید. بلوک های تبلیغاتی و بسیاری موارد دیگر. من به شما توصیه می کنم که این تنظیمات را به دقت مطالعه کنید، به خصوص اگر تازه وارد HTML و CSS هستید.

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

حال ببینیم قالب تم از چه فایل هایی تشکیل شده است، ساختار آن را بررسی کنیم.

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

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

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

• header.php (هدر) - در تمام صفحات وب وجود دارد و وظیفه نمایش بالای سایت را بر عهده دارد.
• index.php - مسئول نمایش محتوای صفحه اصلی است.
• single.php - هر مقاله خاص را نمایش می دهد.
• page.php - محتوای صفحه ثابت سایت.
• category.php - فایلی برای خروجی پست های یک دسته خاص.
• tag.php - آرشیو پست ها را بر اساس برچسب ها نمایش می دهد.
• archive.php - آرشیو موقت مقالات (برای یک ماه یا یک سال). گاهی اوقات این فایل جایگزین category.php و tag.php می شود.
• search.php - سوابق نتایج جستجوی سایت را نمایش می دهد.
• comments.php - فایل قالب نظرات.
• sidebar.php - نوار کناری سایتی که ویجت ها در آن قرار دارند. بسته به ساختار قالب وردپرس، ممکن است چندین نوار کناری وجود داشته باشد. این فایل در تمامی صفحات سایت موجود است.
• 404.php یک فایل خطای 404 است که اگر آدرس صفحه وب اشتباه وارد شده باشد یا وجود نداشته باشد ظاهر می شود.
• functions.php - این فایل معمولا حاوی توابعی است که هنگام نمایش سایت یا هنگام کار با پنل مدیریت فراخوانی می شوند.
• footer.php (footer) - پاورقی سایت، در تمام صفحات آن وجود دارد. ما قبلاً به این فایل قالب وردپرس نگاه کرده بودیم که موارد ناخواسته را از آن حذف کردیم.
• style.css - یک فایل شیوه نامه که وظیفه طراحی خارجی سایت را بر عهده دارد.

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

درک این نکته مهم است که بدون حداقل دانش اولیه HTML و CSS، بهتر است سعی نکنید فایل‌های تم (قالب) وردپرس را ویرایش کنید. و در صورتی که هنوز نیاز به ویرایش هر فایل قالب دارید، حتماً ابتدا یک نسخه پشتیبان از آن تهیه کنید. سپس، اگر مشکلی پیش آمد، همیشه می توانید فایل اصلی را بازیابی کنید.

من به تنهایی به آن توجه می کنم ویرایش قالب وردپرسنه از ناحیه مدیریت وبلاگ، بلکه با باز کردن فایل در Notepad ++ با استفاده از اتصال به سرور میزبان از طریق یک مشتری FTP راحت تر است. در مورد نحوه انجام این کار می توانید در مقاله "".

و این همه برای امروز است. اکنون سایتی که ایجاد کرده اید بسیار جذاب تر به نظر می رسد. شما را در صفحات وبلاگ می بینیم.

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

ما کتاب جدیدی با عنوان "بازاریابی محتوا در رسانه های اجتماعی: چگونه به سر و کله مشترکین برسید و عاشق برند خود شوید" منتشر کرده ایم.

عملکرد مضامین کودک ("دختران") بر اساس رابطه آنها با والدینشان ("والدین") است. توجه به این نکته مهم است که مضامین رایگان و پولی در ابتدا والدین هستند، بنابراین، دختر پارامترها و ویژگی های آنها را کپی می کند و همچنین مجموعه استانداردی از توابع خود را دریافت می کند. در آینده، با در نظر گرفتن نیازهای یک منبع اینترنتی خاص، مجموعه این گزینه ها را می توان گسترش داد.

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

تفاوت بین "دختر" چیست؟

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

1. تغییرات ایجاد شده در اصلاح والدین بر کودک تأثیری ندارد. از این نتیجه می شود که پس از توسعه آنها از یکدیگر مستقل هستند.
2. تابع مشتق فقط در صورت نصب والد عمل می کند و فعال سازی آن بعداً انجام می شود.
3. شرکت‌های تابعه فقط به پایگاه خود وابسته هستند و با یکی یا دیگری در ارتباط نیستند.

آیا کار کردن راحت است

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

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

از آنجایی که این ادامه والد است، مجموعه ویژگی ها و عملکردها در اینجا یکسان است. اجزای اصلی:

1. دایرکتوری (پوشه / محل اجزای فایل).
2. "Style.css"، که در آن ویژگی های اصلی و اضافی مشخص شده است.
3. "Functions.php" که در آن تعریف توابع نوشته شده است.

هیچ محدودیتی برای افزودن الگوها وجود ندارد، اما اجزای ذکر شده در هر کدام اجباری هستند.

عملکرد

دختران در یک پوشه جداگانه بومی سازی شده اند و دارای functions.php و style.css مجزا هستند. نوشتن فایل های کمکی همیشه امکان پذیر است، اما این جفت مسئول عملکرد صحیح - بدون اشکال و مشکل است.

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

دستگاه تم شبیه لایه های ویرایشگر ویرایشگرهای عکس است. اگر کاربر از منبع اینترنتی شما بازدید کند، یک "دختر" در مقابل او باز می شود و سپس گزینه ها و سبک های از دست رفته از والدین بارگیری می شوند. در نهایت، بیشتر کد از والدین منتقل می شود، اما باید قبل از استفاده، تنظیمات کودک را منعکس کند.

چگونه ایجاد کنیم

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

مرحله شماره 1. ایجاد تم کودک وردپرس

این یک فرآیند نسبتاً ساده است. اگر دستورالعمل ها را با جزئیات دنبال کنید، هر کاربری بر آن مسلط خواهد شد.

اول از همه، یک پوشه برای دخترمان در دایرکتوری استاندارد ایجاد می کنیم. برای مرتب نگه داشتن دایرکتوری و سازماندهی مطالب، بهتر است پوشه را با نام "نام والد + پایان فرزند" نامگذاری کنید. برای راحتی، می‌توانید نام پروژه‌ای را که در حال ایجاد یک موضوع برای آن هستیم، اضافه کنید. نکته اصلی این است که نام دایرکتوری فاصله نداشته باشد، در غیر این صورت ممکن است منجر به خطا شود. یک مدیر فایل یا سرویس گیرنده FTP به شما کمک می کند تا یک پوشه جدید ایجاد کنید. امروزه یک کلاینت FTP مانند FileZilla خود را به خوبی ثابت کرده است.

برای مثال، بیایید «بیست هفده» را که برای خیلی ها آشناست، مبنا قرار دهیم. من ترجیح می دهم با File Manager کار کنم، بنابراین مسیر من به پوشه ایجاد شده به صورت زیر است:

ما موارد زیر را انجام می دهیم:

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

گام 2. سفارشی سازی

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

1. ابتدا باید ظاهر را شخصی سازی کنید.

برای انجام این کار، تنظیمات "custom.css" را که در دایرکتوری قرار دارد انجام می دهیم. این را می توان از طریق یک سرویس گیرنده FTP، یک ویرایشگر متن معمولی، یک مدیر فایل یا یک ویرایشگر ویژه وردپرس انجام داد (می توانید آن را با باز کردن "Appearance" و سپس "Editor" پیدا کنید). در اینجا حداقل به دانش حداقلی در مورد قوانین استفاده از CSS و همچنین مهارت بررسی عناصر سایت از طریق مرورگر نیاز خواهید داشت. به عنوان مثال، برای تغییر رنگ پس زمینه در "style.css"، قانون CSS زیر را می نویسیم:

تصویر بعدی نشان می دهد که چگونه طراحی سایت پس از تنظیمات انجام شده تغییر خواهد کرد. پس زمینه سبز روشن شد:

بنابراین، می توانید هر عنصر موجود در سایت را ویرایش کنید.

2. کار با توابع.

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

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

خدمات ویژه برای تسهیل کار توسعه دهنده

برای تسهیل فرآیند ایجاد، می توانید از تعدادی پلاگین ویژه استفاده کنید. کتابخانه وردپرس انواع مختلفی از افزونه ها را ارائه می دهد که استفاده از اکثر آنها رایگان است. استفاده از افزونه ها روند توسعه را تا حد زیادی ساده می کند. بیایید نگاهی به محبوب ترین افزونه ها بیندازیم.

1. کودک Themify.

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

2. پیکربندی تم کودک.

در اینجا می توانید یک "دختر" نیز ایجاد کنید و فقط چند کلیک طول می کشد. ویرایشگر CSS به اندازه کافی قدرتمند است که امکان سفارشی سازی پیشرفته را فراهم می کند. این افزونه به طور خودکار قوانین کلیدی CSS را شناسایی می کند و در هنگام ویرایش بر آنها تأثیر نمی گذارد.

3._child تم دیگ بخار.

در اینجا قالب های آماده برای تشکیل "دختران" وجود دارد. این الگو به سادگی "_child" نام دارد - و به طور خاص برای آسان کردن کارها طراحی شده است. این الگو یک موضوع بصری ارائه می دهد، تنها کاری که باید انجام دهید این است که پیوندی به "والد" ارائه دهید. این نوع قالب به شما امکان می دهد گزینه های حرفه ای ایجاد کنید - 2 فایل آماده قبلاً در اینجا ایجاد شده است، "functions.php" و "style.css" استاندارد.

اولین مورد دارای یک تابع خاص به نام "aa_enqueue_styles ()" است. این گزینه به شما این امکان را می دهد که یک صف از شیوه نامه ایجاد کنید، ابتدا والدین و سپس فرزندان. در نتیجه، سبک دومی همیشه ابتدا مشخص می شود.

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

کد اضافه کردن این گزینه در اینجا آمده است:

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

بیایید خلاصه کنیم

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

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

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

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

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

به طور کلی، شما گزینه های تم اضافی خواهید داشت که می توانید خودتان بدون افزونه انجام دهید. چیزی شبیه این به نظر می رسد:

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

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

برای شروع، باید تصمیم بگیرید که چگونه کد صفحه را متصل کنید. دو گزینه وجود دارد.

اولی ساده است، ما همه چیز را به انتهای شما اضافه می کنیم functions.phpبعد از ?> این همه است.

راه دوم - شما باید یک فایل ایجاد کنید settings.phpو تمام کدها را پس از اتصال به آن اضافه کنید functions.phpبه روش زیر.

شامل ("/ settings.php")؛

چه زمانی ایجاد خواهید کرد settings.php، قبل از افزودن کد به آن، مطمئن شوید که در کدگذاری صحیح ذخیره شده است - UTF-8 بدون BOM... ویرایش فایل بهتر است با Notepadd ++ انجام شود.

حالا شروع به اضافه کردن خود کد می کنیم. ابتدا اجازه دهید تابع خود را ثبت کنیم.

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

// صفحه تنظیمات را به تابع منو اضافه کنید add_settings_page () (add_menu_page (__ ("گزینه های تم")، __ ("گزینه های تم")، "manage_options"، "settings"، "theme_settings_page");) // افزودن کنش ها add_action ("admin_init"، "theme_settings_init"); add_action ("admin_menu"، "add_settings_page");

حالا با وارد شدن به قسمت ادمین، چنین موردی را در منوی مدیریت مشاهده خواهید کرد. این صفحه تنظیمات ما خواهد بود.

بیایید اقدامات و عملکرد ذخیره گزینه های صفحه خود را اضافه کنیم

// تابع تنظیمات ذخیره theme_settings_page () (جهانی $ select_options؛ if (! Isset ($ _ REQUEST ["settings-updated"])) $ _REQUEST ["settings-updated"] = false;?>

حالا بیایید شروع به اضافه کردن کدی کنیم که عناصر صفحه ما را نمایش می دهد. یک div ایجاد کنید و بلوک ها را داخل آن اضافه کنید.

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

اکنون کل کد است

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

برای این کار ابتدا باید تابع ما را فعال کنید

این خط باید هر بار قبل از نمایش گزینه نوشته شود.

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

برای لوگویی مانند این:

نتیجه نهایی به این صورت خواهد بود

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

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

برای این کار باید کد زیر را بنویسیم:

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

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

شما می توانید هر محتوایی را اضافه کنید. در صورت لزوم، کف سایت را مخفی کنید.

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

در اینجا، مانند متن در فوتر، از شرط استفاده خواهیم کرد - اگر... فقط دو عنصر در لیست من وجود دارد، بنابراین شرط به شرح زیر است - اگر مورد شماره یک (در سمت چپ) انتخاب شده باشد، یک بلوک با یک ویژگی در سبک ها نشان می دهیم - شناور به سمت چپ؛، در غیر این صورت بلوکی را نشان می دهیم که دارایی آن است - شناور: سمت راست;.

بلوک سمت چپ

بلوک در سمت راست

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

این همه، از توجه شما متشکرم. 🙂