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

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

منو را باز کنید صفحات -> افزودن جدیدو یک صفحه جدید با یک قالب صفحه جدید ایجاد کنید.

یک عنوان برای صفحه وارد کنید و تغییرات خود را ذخیره کنید. در ستون سمت راست در پانل، می توانید یکی از قالب های صفحه مورد استفاده در موضوع خود را انتخاب کنید. شما باید یک قالب صفحه جدید به این لیست اضافه کنید. همه این قالب ها در یک پوشه در سرور شما قرار دارند. اما باید یک قالب صفحه جدید به پوشه اضافه کنید wp-content / themes / theme #####.

یک فایل .php جدید در هر ویرایشگر مانند Dreamweaver یا Notepad ++ ایجاد کنید و آن را مانند نامگذاری کنید new.php ... کد زیر را به این فایل اضافه کنید:

فایل را ذخیره کرده و در یک پوشه آپلود کنید wp-content / themes / theme #####به سرور شما

اکنون به صفحه ای که در پنل مدیریت وردپرس خود ایجاد کرده اید بازگردید. در پنل صفات صفحهمی توانید یک الگوی صفحه جدید به نام "Custom" انتخاب کنید.

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

می توانید از عناصر کد سایر الگوهای صفحه از پوشه استفاده کنید wp-content / themes / CherryFrameworkبرای ایجاد یک صفحه خاص

بیایید ابتدا یک هدر و پاورقی به قالب صفحه جدید اضافه کنیم:

اگر تغییرات خود را ذخیره کنید، می توانید آنها را در صفحه مشاهده کنید:



اکنون باید نوع محتوایی را که می خواهید در این صفحه استفاده کنید انتخاب کنید. فرض کنید برای پست‌های سفارشی «تیم ما» یک قالب صفحه جداگانه ندارید. و شما طراحی قالب صفحه گواهینامه ها را دوست دارید و می خواهید از آن طراحی برای پست های "تیم ما" استفاده کنید. برای این در منو طراحی -> ویرایشگر (ظاهر -> ویرایشگر)به راحتی می توانید فایلی را که حاوی کد الگوی Testimonials است پیدا کنید. نام او page-testi.php.



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

"data-motopress-wrapper-file =" page-testi.php "data-motopress-wrapper-type =" content ">
"data-motopress-type =" static "data-motopress-static-file =" static / static-title.php ">
"id =" content "data-motopress-type =" loop "data-motopress-loop-file =" loop / loop-testi.php ">
sidebar "id =" نوار کناری "data-motopress-type =" static-sidebar "data-motopress-sidebar-file =" sidebar.php ">

کد کپی شده را در فایل new.php قرار دهید. جایگزین کردن نام قالب: سفارشی بر روی نام قالب: تیم

و جایگزین کنید page-testi.php بر روی new.php در این کد

این کد حاوی لینک فایل نیز می باشد حلقه / loop-testi.php... این فایل دیگری است که باید آن را کپی و ویرایش کنید. فایل را کپی کنید loop-testi.phpاز پوشه wp-content / themes / CherryFramework / loopو آن را در پوشه قرار دهید wp-content / themes / theme ##### / حلقه(اگر هیچ پوشه ای در پوشه تم شما وجود ندارد حلقه، باید آن را ایجاد کنید). نام این فایل را به عنوان مثال به loop-new.php و آن را برای ویرایش باز کنید. کلمه را جایگزین کنید "تستی"روی کلمه "تیم"در تمام خطوط فایل و ذخیره تغییرات. (می توانید از میانبر صفحه کلید Control (Command) + F برای جایگزینی کلمات استفاده کنید.)



زمانی که فایل loop-new.phpایجاد و ویرایش کردید، فایل را دوباره باز کنید new.phpو جایگزین کنید حلقه / loop-testi.phpبر روی loop / loop-new.phpدر کد او در نتیجه کد شما به شکل زیر خواهد بود:

"data-motopress-wrapper-file =" new.php "data-motopress-wrapper-type =" content ">
"data-motopress-type =" static "data-motopress-static-file =" static / static-title.php ">
"id =" content "data-motopress-type =" loop "data-motopress-loop-file =" loop / loop-new.php ">
sidebar "id =" نوار کناری "data-motopress-type =" static-sidebar "data-motopress-sidebar-file =" sidebar.php ">

تغییرات را ذخیره کنید و صفحه جدید خود را آزمایش کنید. اکنون باید حاوی پست‌های سفارشی «تیم ما» با طراحی صفحه گواهی‌ها باشد.

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

چگونه خودتان یک قالب وردپرس بسازید

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

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

بنابراین اکنون می دانید که چگونه یک قالب وردپرس بسازید. برای بدست آوردن آن باقی مانده است. برای انجام این کار، روی دکمه "ذخیره" در پایین کلیک کنید، و سپس، در جایی که پیش نمایش بود، روی پیوند "Files packed: download theme ZIP file" کلیک کنید تا بایگانی تم را در رایانه خود دانلود کنید. پس از آن می توانید آن را در وب سایت خود نصب کنید.

با سلام خدمت دوستان

امروز ما به یک موضوع بسیار جالب برای بسیاری اشاره خواهیم کرد. شاید متوجه شده باشید که من اخیراً طراحی وبلاگم را به روز کردم، شما را نمی دانم، اما من واقعاً آن را دوست دارم. من این قالب را به معنای واقعی کلمه در چند ده دقیقه ایجاد کردم و نیازی به دانش HTML، CSS و PHP یا اطلاعاتی در مورد موضوع ایجاد قالب نداشتم.

بنابراین، چگونه بدون هیچ دانشی یک قالب برای وردپرس بسازید؟

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

روش شماره 1- شما HTML را یاد می گیرید، ساختار قالب ها را یاد می گیرید. البته، اگر زمان و تمایل به شروع با آن را دارید، این روش مزایای خود را دارد. دانش HTML هنوز به کسی آسیب نرسانده است.

روش شماره 2- یک قالب از یک فریلنسر سفارش دهید. اگر پول رایگان دارید، حتما این روش خاص را انتخاب کنید. هزینه ایجاد یک قالب با کیفیت از 15000 تا 70000 روبل است.

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

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

ما ملاقات کردیم، برنامه ایجاد قالب - (نسخه مهم نیست، من از دومی استفاده می کنم، به نظر من، چهارم قبلا منتشر شده است). این برنامه پولی است، اما ما مردم روسیه هستیم (منظورم را متوجه شدید). من می دانم که درس های زیادی در مورد این برنامه در شبکه وجود دارد، اما من از پاسخ دادن به همان سؤال مشترکانم خسته شده ام.

برنامه را دانلود کنید، اجرا کنید.

1. "WordPress" را در پنجره اصلی برنامه انتخاب کنید.

2. یک قالب خالی در پنجره پیش نمایش ظاهر می شود، البته کل منحنی، اما در روند کار اثری از آن وجود نخواهد داشت.

3. به برگه "رنگ ها و فونت ها" بروید، یک طرح رنگی را انتخاب کنید (بعداً آن را کمی اصلاح خواهیم کرد)، من طیف رنگ های خاکستری روشن را دوست دارم. روی دکمه "Font Sets" کلیک کنید، فونت ها را انتخاب کنید (من همه جا از verdana استفاده می کنم).

4. به تب "Layout" بروید، در اینجا از ما خواسته می شود که تعداد و ترتیب ستون ها و همچنین محل سربرگ را (با یک هدر ساده) انتخاب کنیم. من همیشه "دو ستون -> سمت راست وسط" را انتخاب می کنم.

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

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

عرض ورق (ترجیحا حداقل 1000 پیکسل)، سایه و حاشیه آن را تنظیم کنید.

7. در تب بعدی، از ما خواسته می شود که هدر (هدر یا هدر) را شخصی سازی کنیم. پاورقی خود را با استفاده از تنظیمات سفارشی کنید.

1. تنظیم عرض و ارتفاع هدر.

2. با استفاده از این منو می توانید یک هدر از قبل آماده شده را در برنامه بارگذاری کنید و همچنین به آن افکت اضافه کنید.

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

4. نام سایت شما و شعار آن.

5. محل نام و شعار.

8. در برگه بعدی، از ما خواسته می شود که منو را شخصی سازی کنیم (معمولاً در زیر هدر قرار دارد). یک سبک منو را انتخاب کنید و پر کنید.

9. در برگه بعدی - "مقالات"، از ما دعوت شده است که ظاهر منطقه مکان محتوا (متن، ویدئو، تصاویر، جداول) را سفارشی کنیم. با استفاده از تنظیمات ارائه شده آن را سفارشی کنید.

1. تصویر مقاله (این پارامتر روی چیزی تأثیر نمی گذارد، می توان آن را به همان شکلی که هست رها کرد).

2. با استفاده از این منو می توانید سبک ناحیه محتوا را (با یا بدون ضربه) تنظیم کنید.

3. نمایش متن در مقاله را سفارشی کنید.

4. ویرایش پارامترهای مختلف منطقه محتوا.

5. هدر را سفارشی کنید.

6. فوتر را سفارشی کنید.

10. با کمک تب بعدی - "Blocks" می توانید ظاهر بلوک های جانبی (نوارهای کناری) را شخصی سازی کنید.

تنظیمات و قالب صادرات

1. بر روی دکمه "File" (در گوشه سمت چپ بالای پنجره برنامه) کلیک کنید.

2. "Export-> Export Settings" را انتخاب کنید. به تب Properties رفته و اطلاعات مورد نیاز را پر کنید. به برگه «پاورقی» بروید و علامت تمام کادرها را بردارید.

3. مرحله شماره یک را تکرار کنید. "Export-> WordPress Theme" را انتخاب کنید.

4. قالب را به عنوان یک پوشه ZIP صادر کنید.

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

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

درس ویدیویی «چگونه بدون دانش HTML یک قالب برای وردپرس بسازیم؟

فقط به خاطر داشته باشید که وردپرس کلاس هایی تولید می کند که باید در شیوه نامه وجود داشته باشند. به عنوان مثال کلاس ها aligncenter، alignleft و alignrightبرای تراز کردن تصاویر و بلوک کردن عناصر استفاده می شود، و آنها باید در شیوه نامه شما گنجانده شوند (می توان از شیوه نامه طرح زمینه پیش فرض کپی کرد):

.aligncenter،
div.aligncenter (
نمایش: بلوک؛
حاشیه چپ: خودکار;
حاشیه سمت راست: خودکار;
}
.تراز چپ (
شناور به سمت چپ؛
}
.alignright (
شناور: سمت راست;
}

از کلاس‌های زیر برای تراز کردن تصاویری استفاده می‌شود که زیرنویس دارند (می‌توان از تم پیش‌فرض کپی کرد، بعداً، در صورت لزوم، تصحیح کرد):

.wp-caption (
حاشیه: 1px جامد #ddd;
text-align: center;
پس زمینه رنگ: # f3f3f3;
padding-top: 4px;
حاشیه: 10 پیکسل
/ * پارامترهای اختیاری که گوشه های گرد را در مرورگرهای پشتیبانی شده ایجاد می کنند * /
-moz-border-radius: 3px;
-khtml-border-radius: 3px.
-webkit-border-radius: 3px.
حاشیه-شعاع: 3px;
}
.wp-caption img (
حاشیه: 0;
بالشتک: 0;
حاشیه: 0 هیچ
}
.wp-caption p.wp-caption-text (
اندازه فونت: 11px;
ارتفاع خط: 17 پیکسل.
padding: 0 4px 5px;
حاشیه: 0;
}

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

.دسته بندی ها (...)
cat-item / * این کلاس به همه دسته ها اختصاص داده شده است * /)
.current-cat (/ * سبک دسته فعلی * /)
.current-cat-parent (/ * سبک برای والدین (های) دسته فعلی * /)
.children (/ * کلاس کودک * /)
.pagenav (/ * پیمایش صفحه * /)
.page_item (/ * هر مورد در لیست * /)
.current_page_item (/ * این کلاس در لیست صفحه به صفحه فعال فعلی اختصاص داده شده است * /)
.current_page_parent (/ * کلاس برای صفحه اصلی نسبت به فعلی * /)
.current_page_ancestor (/ * هر صفحه سطح بالا در رابطه با این صفحه * /)
.widget (/ * همه ویجت ها در این کلاس پیچیده شده اند * /)

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

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

پیدا کردن:

بنابراین، هنگام طرح‌بندی موضوع، این را در نظر می‌گیریم.

و آخرین چیزی که باید به style.css اضافه کنید اطلاعاتی در مورد خودتان و موضوعی است که ایجاد کرده اید. اطلاعات در ابتدای فایل در نظرات قرار داده شده است:

/*
نام تم: با یک نام تم منحصر به فرد بیایید
URI تم: http: // پیوند-به-موضوع-صفحه-خانه
توضیحات: شرح موضوع
نویسنده: شروع کننده موضوع
URI نویسنده: http: // پیوند-به-صفحه-نویسنده
الگو: اجداد-موضوع-نام
برچسب‌ها: برچسب‌های تم - فقط از لیست پیشنهادی wordpress.org
نسخه: نسخه
خب، اینم متن مجوز
*/

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

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

یک تم wp چگونه کار می کند:

اگر پوشه تم پیش فرض (wp-content / themes / default) را باز کنید، بسیاری از فایل های PHP (فایل های تم) و یک فایل style.css را مشاهده خواهید کرد. وقتی وبلاگ را مشاهده می کنیم، WP شامل فایل های موضوعی (index.php<

این کار آماده سازی اولیه را تکمیل می کند و می توانیم به سمت ایجاد یک موضوع از منبع منبع موجود برویم.

مرحله 1:
ابتدا در دایرکتوری تم های وردپرس (wp-content / themes)، یک پوشه با نام موضوع خود ایجاد کنید. بگذار باشد ruseller_lessons... سپس از پوشه تم پیش فرض (wp-content / themes / default) فایل ها را کپی کنید comments.php, search.phpو 404.phpبه پوشه تم ما این فایل ها مسئول نظرات و جستجوهای وبلاگ هستند. سپس در ruseller_lessonsشیوه نامه را کپی کنید style.cssالگوی ما، screenshot.png (300x225)و پوشه تصاویر.

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

گام 2 - header.php
باز میکنیم index.htmlو هر چیزی که قبل از کامنت است را قطع کنید، یک فایل جدید ایجاد کنید header.phpو کد برش را در آن قرار دهید، آن را در دایرکتوری موضوع ما ذخیره کنید ruseller_lessons: