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

این مقاله مراحل ایجاد یک الگو را پوشش می دهد و طرح بندی فایل های psd را شرح می دهد.

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

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

هدف از ایجاد یک تم به صورت دستی چیست؟

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

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

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

بنابراین، در اینجا دلایل اصلی وجود دارد که چرا باید قالب وب سایت خود را بسازید:

• همه چیز را در مورد HTML، CSS و چیزی در مورد PHP بیاموزید.
• شما می توانید ایجاد کنید، زیرا طراحی وب نیز یک هنر است.
• کسب درآمد از فروش موضوعات امکان پذیر خواهد بود.
• کشف یک مهارت جدید؛
• طرحی را ایجاد کنید که 100% برای سایت آینده شما مناسب باشد.

موضوع با چه استانداردهایی مطابقت دارد؟

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

همه تم های وردپرس در پوشه wp-content/themes/ میزبانی می شوند. داخل این پوشه پوشه های دیگری با مضامین مجزا وجود دارد، یک فایل با ویژگی های اضافی(functions.php)، فایل های سبک و تصاویر. برای یافتن داده ها در مورد یک موضوع خاص، باید به دایرکتوری مربوطه بروید. این موضوع "Western" را در پوشه wp-content/themes/western/ قرار می دهد.

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

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

1. Style.css فایل سبکی است که مسئول آن است طراحی خارجیسایت.
2. Functions.php فایل تابع A که ویژگی های مختلفی را به صفحات اضافه می کند.
3. سایر فایل های php که مسئولیت ویژگی های خروجی قالب در سایت را بر عهده دارند، ادغام قالب با وردپرس است. این فایل ها هستند که به شما امکان می دهند طرح psd را به یک قالب کامل ترجمه کنید.

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

قوانین ایجاد یک فایل style.css

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

1. نام الگو.
2. URL که به موضوع منتهی می شود.
3. توضیحاتی که ویژگی های اصلی قالب را نشان می دهد. به طور خلاصه.
4. نام نویسنده. در این صورت نام خود را وارد کنید.
5. پیوند به نویسنده، یعنی شما. می توانید پیوندی به نمایه شبکه های اجتماعی خود ارائه دهید.
6. نام تم والد اختیاری است.
7. نسخه تم. اگر فقط ایجاد شود، پس v. 1.0.
8. توضیحات کامل قالب می توانید به طور گسترده بنویسید.

برای ایجاد ساده ترین قالب وردپرس، فقط یک نسخه ویرایش شده با یک فایل style.css اضافه کنید. در این فایل در کنار خط “قالب” نام تم اصلی را مشخص کنید. به عنوان مثال، کلاسیک اگر در حال ویرایش یک قالب استاندارد هستید. اکنون تم ایجاد شده به طور کامل با قالب کلاسیک مطابقت دارد. بنابراین، باید فایل ها را در پوشه wp-content/themes/classic آپلود کنید.

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

ویژگی های فایل عملکرد اضافی functions.php

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

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

ویژگی های فایل های قالب php

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

اگر می‌خواهید یک موضوع حداقلی به سایت اضافه کنید یا طرح‌بندی psd خود را امتحان کنید، فقط به دو فایل در پوشه قالب نیاز دارید:

1. style.css
2. index.php.

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

حتی اگر به طور تصادفی یک فایل قالب را مشخص نکنید، وردپرس به طور خودکار تنظیمات پیش فرض خود را به سایت اضافه می کند. به عنوان مثال، اگر فایلی را که مسئول نظرات است اضافه نکنید، موتور نسخه های خود را از این تابع در فهرست ها پیدا می کند - به عنوان مثال، wp-comments.php. سپس نظرات "خارجی" به ساختار سایت شما سقوط می کند، که الزامات قالب را برآورده نمی کند. برای جلوگیری از این اتفاق، باید تمام فایل های اصلی را برای نمایش اجزای مختلف صفحه اضافه کنید:

• header.php - مسئول هدر سایت.
• sidebar.php - نوارهای کناری.
• footer.php - پاورقی منبع (قسمت پایین آن)؛
• comments.php و comments-popup.php نظراتی هستند.

پس از تولید هر یک از این فایل ها، برای اینکه سایت شروع به نمایش آنها کند، باید اطلاعات مربوط به آنها را در فایل index.php اصلی قالب وارد کنید. برای این کار در index.php تگ هایی که به فایل های نام گذاری شده منتهی می شوند را مشخص کنید. مثلا:

• برای افزودن یک فایل هدر سایت (header.php) تگ را بنویسید

  برچسب الگو get_header();

• برای فوتر مشابه است، اما به جای هدر، فوتر و غیره را مشخص کنید.

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

انتخاب عملکرد قالب

با گذشت زمان، با یک دوراهی روبرو خواهید شد - کدام نوع قالب را انتخاب کنید. موتور امکان انتخاب را فراهم می کند. یا می‌توانید یک الگو با سلسله‌مراتب الگو انتخاب کنید، یا یک طرح‌بندی با برچسب‌های شرطی.

گزینه اول قبلاً در نظر گرفته شده است. تمام فایل های قالب php- این سلسله مراتب الگو است. یعنی با رعایت قوانین این سلسله مراتب، به تدریج فایل های طرح بندی مجزا تولید می کنید. بنابراین، شما یک قالب کامل از تعدادی مؤلفه کاربردی php ایجاد خواهید کرد. سلسله مراتب در این مورد بر اساس اصل بارگذاری بر اساس تقاضا کار می کند. به عنوان مثال، اگر شما یک فایل دسته بندی (category.php) دارید و کاربر آن را درخواست کرده است، این جزء سایت خاص در مرورگر بارگذاری می شود. اگر نه، فایل قالب کلید index.php بارگذاری می شود.

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

گاهی اوقات اصل سلسله مراتب قالب برای ارائه راحت ترین نمایش قالب کافی نیست. در این مورد، برنامه نویسان به استفاده از اصل دوم متوسل می شوند - آنها Conditional Tags را معرفی می کنند. این برچسب ها سایت را از نظر انطباق بررسی می کنند شرایط خاصو اگر رعایت نشود، ظاهر آن را تغییر می دهند. یعنی این تگ ها بر اساس اصل if/else (if/then) کار می کنند. بنابراین لازم نیست دریایی از فایل های php را با تعداد هر دسته اضافه کنید، بلکه می توانید شرایط را برای هر ID یک بار بنویسید.

طرح بندی psd در وردپرس چگونه است

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

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

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

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

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

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

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

طراحی سایت
بنابراین، در دو درس اول، ابتدا و سپس با کمک ابزارهای HTML و CSS. روی تصویر زیر کلیک کنید تا ببینید چیدمان سایت چگونه است.

تمامی فایل های قالب وردپرس
اکنون باقی مانده است که یک قالب وردپرس بر اساس طرح سایت ایجاد کنیم. تصویر زیر نشان می دهد مجموعه استانداردفایل های قالب وردپرس در آموزش قبلی یک پوشه ایجاد کردیم تصاویرو فایل style.css. پرونده هم داریم index.htm، که قطعات کد از آن گرفته می شود و در فایل های مربوطه کپی می شود php. و سپس بعداً در phpفایل ها با دستورات وردپرس درج می شوند و در نتیجه تشکیل می شوند phpفایل های قالب وردپرس

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

header.php
این فایل وظیفه نمایش هدر سایت را بر عهده دارد. ماهیت این است که یک قطعه کد از یک فایل گرفته می شود index.htm(بالا و از جمله

) در فایل درج می شود header.phpو پس از آن در کد دستوری وردپرس ادغام می شوند. در تصویر با رنگ قرمز مشخص شده اند. برای مشاهده در سایز بزرگ روی عکس کلیک کنید.

Index.php
این فایل وظیفه نمایش آنچه کاربر روی آن می بیند را بر عهده دارد صفحه نخستسایت. فایل به همین ترتیب تولید می شود. index.php. کپی کردن یک قطعه کد از index.htmو با دستورات وردپرس پر شده است. برای مشاهده در سایز بزرگ روی عکس کلیک کنید.

نوار کناری.php
این فایل وظیفه نمایش عناصر در نوار کناری را بر عهده دارد. ما همچنین کد را از index.htm(کل div id = "سمت") و در فایل پیست کنید نوار کناری.php. در مرحله بعد، مانند قبل، دستورات وردپرس را وارد کنید. برای مشاهده در سایز بزرگ روی عکس کلیک کنید.

Archive.php
مسئول صدور سوابق آرشیوی سایت. برای ایجاد این فایل محتویات فایل را به طور کامل کپی می کنیم index.phpو درج کنید archive.phpو سپس یک کد (7 خط) را بین خطوط قرار دهید و

Search.php
این فایل مسئول نتایج جستجو است. برای ایجاد این فایل محتویات فایل را به طور کامل کپی می کنیم index.phpو درج کنید search.phpو سپس یک کد (1 خط) را بین خطوط قرار دهید و . نحوه انجام آن را در تصویر زیر ببینید. برای مشاهده در سایز بزرگ روی عکس کلیک کنید.

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

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

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

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

اگر در حال خواندن این مقاله هستید، به احتمال زیاد طراحی وب سایت بسیار زیبایی دارید که احتمالاً ساخته شده است فتوشاپو با فرمت PSD، JPG، PDF، AI یا PNG ذخیره کنید. اکنون می خواهید این فایل تصویری را به قالب وردپرس تبدیل کنید تا بتوانید آن را در وب سایت یا وبلاگ تازه ایجاد شده خود اعمال کنید. شما هم ممکن است آرزو داشته باشید تبدیل PSD به وردپرس -اما چه می شد اگر می توانستی این تحول را به تنهایی انجام دهی و آن هم رایگان است!

بسیاری از افرادی که در طراحی گرافیک مهارت دارند به این مرحله از تبدیل قالب PSD به وردپرس می رسند. و احساس می کنند گیر کرده اند! اما تقصیر آنها نیست. ساخت یک وب سایت نه تنها به توانایی تولید طرح های عالی نیاز دارد، بلکه به مهارت های برنامه نویسی نیز نیاز دارد. شما باید حداقل در HTML، CSS، JavaScript، jQuery و برنامه نویسی PHPبرای چرخاندن خود فایل PSDبه یک صفحه وب مشکل اینجاست که اکثر مردم یا یک طراح خوب هستند یا یک برنامه نویس خوب!

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

فایل PSD چیست؟

اونایی که نمیدونن PSD مخفف Photoshop Document است.این فرمت فایلی است که Adobe Photoshop فایل های اجرایی را در آن ذخیره می کند. می‌توانید فایل‌های PSD را در فتوشاپ باز کنید و تغییرات بیشتری در طراحی ایجاد کنید. بنابراین گاهی اوقات فایل های PSD نامیده می شوند باز کردن فایل ها (اشاره به اینکه این فایل ها قابل ویرایش هستند).

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

وردپرس چیست؟

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

طراحی سایت بر اساس وردپرس نامیده می شود موضوع(و گاهی اوقات، نمونه).

قالب PSD را به وردپرس تبدیل کنید

مرحله 1: فایل PSD را برش دهید

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

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

Adobe Photoshop به شما امکان استفاده از لایه ها را می دهد. دارای یک شی داخلی برای برش PSD و ذخیره بخش های حاصل به عنوان فایل های تصویری جداگانه. می توانید این تصاویر را در فرمت های JPG یا PNG ذخیره کنید. اگر برای کار در هر یک از این بخش ها به شفافیت نیاز دارید، باید آن را در آن ذخیره کنید فرمت PNGزیرا JPG از شفافیت پشتیبانی نمی کند.

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

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

ویدیوی یوتیوب زیر دقیقاً نشان می دهد که چگونه یک فایل PSD را برش داده و آن را به عنوان تصاویر مختلف ذخیره کنید:

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

مرحله 2: فایل های HTML و CSS ایجاد کنید

اکنون بخش کد نویسی اصلی فرآیند تبدیل PSD به وب سایت آغاز می شود. شما اساساً باید یک صفحه وب ایجاد کنید و تمام تصاویر برش داده شده را به گونه ای مونتاژ کنید که دقیقاً شبیه PSD شما باشد.

ابتدا باید یک فایل HTML ایجاد کنید. شما می توانید آن را هر چه می خواهید بنامید، اما طبق قرارداد بیایید آن را بنامیم index.htm.در این فایل باید کد HTML یا XHTML بنویسید تا قسمت های مختلف تصویر را از PSD خود نشان دهید. برای ایجاد یک طرح پایه، می توانید از عناصر DIV استفاده کنید. عناصر DIV بسیار متنوع هستند. شما می توانید عناصر DIV را در کنار هم، روی هم قرار دهید. شما می توانید مرکز یک عنصر DIV را در سمت چپ و راست تراز کنید، و می توانید آنها را به طور خاص در مختصات خاصی در صفحه وب قرار دهید.

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

پس از تکمیل این طرح اولیه صفحه وب خود، باید آن را سبک کنیدتا آن را مانند PSD خود کنید. برای استایل، باید از قوانین Cascading Style Sheets (CSS) استفاده کنید. با استفاده از این قوانین می توانید از سبک های مختلف فونت، اندازه ها، رنگ ها، سایه های متن، رنگ خاکستری تصویر، حاشیه ها و غیره استفاده کنید.

برای نوشتن قوانین سبک CSS باید فایل دیگری به نام ایجاد کنید styles.cssو سپس این فایل css را فراخوانی کنید index.htm.سبک های موجود در styles.cssاعمال خواهد شد عناصر مختلفدر فایل های HTML شما

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

آموزش برای HTML

1. آموزش HTML W3Schools
2. TutorialsPoint آموزش HTML
3. HTML.net
4. HTML Dog

آموزش های CSS

1. آموزش css
2. آموزش CSS W3Schools
3. توتس پلاس
4. مبانی CSS

مرحله 3: شکستن یک فایل HTML در فایل های تم وردپرس

در این لحظهدر فرآیند تبدیل PSD به قالب وردپرس، یک فایل HTML خواهید داشت (index.html)و یک فایل css (styles.css).در مرحله سوم باید فایل HTML را بر اساس تقسیم بندی کنید تم ساختار وردپرس.سردرگم؟ خوب، وردپرس مجموعه ای از فایل های از پیش تعریف شده دارد که با هم نام گذاری می شوند تا یک صفحه وب ایجاد کنند. به عنوان مثال، هنگام نمایش یک پست، وردپرس به محتویات هدر فایل، فایل فشرده، فایل نوار کناری و پاورقی و غیره نیاز دارد. اما شما تمام کدها را فقط در یک فایل دارید - index.htm.بنابراین باید کد را دوباره توزیع کنید index.htmبه فایل های مختلف wp این اساساً یک کار کات رب است! در اینجا لیستی از برخی از فایل های موضوعی مهم برای وردپرس آورده شده است:

• archive.php
• category.php
• comments.php
• footer.php
• header.php
• index.php
• page.php
• search.php
• نوار کناری.php
• single.php
• style.css
• 404.php

برای ایجاد یک تم اصلی وردپرس، حداقل مایلید ایجاد کنید header.php, footer.php, نوار کناری.php single.phpو index.php

به سادگی این فایل های PHP را در هر ویرایشگر متن دفترچه یادداشت ایجاد کنید و کد مربوطه را از آن کپی کنید index.htmبه این فایل ها کد، ایجاد قسمت عنوان وارد خواهد شد header.php,کد پاورقی به footer.php... و همینطور ادامه دارد.

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

ذیل ویدیوی یوتیوببه شما کمک می کند تا نحوه تنظیم یک "موضوع برهنه وردپرس" را درک کنید (در اصل به معنی -یک تم خالی WodPress است.

مرحله 4: افزودن ویژگی ها و برچسب های وردپرس

اکنون زمان تبدیل فایل های ساده PHP به فایل های تم وردپرس است. برای این کار باید تگ های وردپرس را در فایل ها اضافه کنید. اما ممکن است بپرسید تگ های وردپرس دقیقا چیست؟

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

برای درک بهتر به یک مثال نگاه می کنیم. در صفحه اصلی (index.php)، می توانید لیست را نشان دهید پستهای اخیر. این لیست باید به طور خودکار نحوه و زمان ارسال یک پست جدید را تغییر دهد. شما می توانید خودتان بنویسید توابع PHPبرای استخراج داده های پست از پایگاه داده و نمایش آن در صفحه اصلی. اما سازندگان وردپرس زندگی شما را آسان کرده اند! شما مجبور نخواهید بود که خودتان بنویسید توابع دقیق. فقط استفاده کن wp_get_recent_posts ($arg، $output)از وردپرس و لیستی از پست های اخیر نمایش داده شده را ببینید!

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

• برچسب های قالب وردپرس
• لینک توابع وردپرس

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

همچنین می توانید در یک فایل تصویری به نام قرار دهید screenshot.jpgیا screenshot.png.این فایل به عنوان تصویر بند انگشتی از موضوع شما نشان داده می شود. یادگیری نحوه گرفتن اسکرین شات آسان است.

لیست فایل‌های موجود در قالب وردپرس معمولی ممکن است به شکل زیر باشد:

باید پوشه تم را در پوشه آپلود کنید /wp-content/themes نصب وردپرس. به عنوان مثال، اگر نام تم را Minerva -سپس فایل‌های تم باید در آن باشند / wp-content / themes / Minerva

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

برای مشاهده مراحل بعدی به ویدیوی زیر نگاه کنید:

مرحله 5: قابلیت های بیشتری مانند جستجو و ویژگی های سفارشی اضافه کنید

قالب وردپرس شما در حال حاضر راه اندازی شده است. سفر از PSD به قالب وردپرس به پایان رسید. اما همچنان می توانید موارد بیشتری را اضافه کنید عملکردبه موضوع شما

به عنوان مثال، شما می توانید ایجاد کنید search.phpفایلی با کد که نتایج جستجو را از سایت شما نمایش می دهد.

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

برای مقابله با خطاهای 404 (صفحه یافت نشد)، می توانید یک فایل ایجاد کنید 404.php.وردپرس محتویات این فایل را هر زمان که شخصی بخواهد به URL سایت شما که وجود ندارد دسترسی پیدا کند نشان می دهد.

شما همچنین می توانید مقداری اضافه کنید توابع جاوا اسکریپت. جاوا اسکریپت پرکاربردترین زبان برنامه نویسی سمت کلاینت است. می توانید توابع جاوا اسکریپت را در فایل ها بنویسید jsو این توابع را در فایل های PHP خود فراخوانی کنید. به عنوان مثال، اعتبارسنجی فرم چیزی است که معمولاً با جاوا اسکریپت انجام می شود. اگر کاربر سعی می کند چیزی را در سایت خود بدون تایپ پیدا کند کلید واژه هادر کادر جستجو، جاوا اسکریپت است که به کاربر می گوید که باید معیارهای جستجو را وارد کند.

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

تبدیل رایگان PSD به وردپرس

اتفاقی افتادم نرم افزار Elemente توسط DivineProjects. شما می توانید این برنامه را به صورت رایگان دانلود کنید و PSD شما را به یک قالب آماده برای استفاده با امکانات کامل وردپرس تبدیل می کند. این نرم افزار مانند یک افزونه فتوشاپ کار می کند.

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

همین چند سال پیش، خط جدیدی از خدمات ظاهر شد که به طور خودکار طراحی وب سایت شما را از یک فایل فتوشاپ تبدیل می کند. PSDبه کد HTML + CSSرایگان است. قبلاً تلاشی ناشیانه برای خودکار کردن کار با آن به نظر می رسید بهترین کیفیت، اما اکنون این سرویس ها برای ارائه یکپارچگی کامل با سیستم های مدیریت محتوا (مانند وردپرس) تکامل یافته اند.

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

1 DevPress

نویسنده این سرویس تونگ دو، طراح و توسعه دهنده عالی وردپرس است که با محصول جدید خود مرا خوشحال کرد. سرویسی که ارائه می‌کند قادر است: طراحی تم، کدنویسی XHTML/CSS، توسعه تم XHTML به WordPress و مدیریت سایت.

2. WP از PSD

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

3. کدگذاری افراد

این سرویس کار با XHTML ایستا، HTML5 را ارائه می دهد و همچنین مجموعه ای آماده از قالب ها را برای یک فروشگاه آنلاین ارائه می دهد. Codingpeople به عنوان مرجع آلمانی در مورد کیفیت کد در نظر گرفته می شود.

4. WP Canvas

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

5. PSD به WP

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

6.PixelWP

PixelWP.com یک مبدل قالب عالی PSD به وردپرس را به مشتریان خود ارائه می دهد که می توانید به آن اعتماد کنید. مطمئن باشید طرح شما با کیفیت بالا و به موقع اجرا خواهد شد.

7. PSD به Any

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

8. PSD 2 HTML

این سرویس برای اولین بار در سال 2005 راه اندازی شد. P2H.com / PSD2HTML.com اولین در نوع خود بود و بیش از 50000 مشتری را جذب کرده است.

9.HTML Cut

HTMLcut یک سرویس گام به گام برای پیاده سازی است کد تمام شدهاز طرح شما شما در حال آپلود هستید طرح PSD، - بقیه به HTMLcut بستگی دارد.

10. RapidXHTML

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