• ساخت قالب وردپرس از psd. ایجاد یک تم ساده برای وردپرس حذف فایل های HTML

    خواهیم دید که چگونه یک قالب آماده وردپرس ایجاد می شود که برای نصب روی هاست آماده است. برای این کار فایل های 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 را شرح می دهد.

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

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

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

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

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

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

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

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

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

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

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

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

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

    1. Style.css یک فایل سبک است که مسئولیت طراحی خارجی سایت را بر عهده دارد.
    2. Functions.php یک فایل کاربردی است که ویژگی های مختلفی را به صفحات اضافه می کند.
    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 به یک موضوع آماده برای یک منبع اینترنتی در موتور وردپرس را می دانید.

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

    1. وبلاگ Frontend

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

    صفحه اول استاندارد ( index.php)

    تک استاندارد ( single.php)

    2. طرح بندی فتوشاپ

    بر اساس ظاهر و احساس تم پیش فرض، طرح های فتوشاپ را برای وبلاگ خود طراحی کنید. به عنوان مثال، من از GlossyBlue، یکی از تم های رایگان خود استفاده می کنم. برای مشاهده فایل کامل فتوشاپ، demo.zip را دانلود کنید.

    3. HTML و CSS

    پس از آماده شدن طرح PSD، برای هر صفحه یک قالب HTML+CSS ایجاد کنید. با انجام مراحل این آموزش، می توانید از فایل های HTML GlossyBlue من استفاده کنید دمو.زیپ. پس از باز کردن آرشیو، خواهید دید index.html, single.htmlو page.html. بعد، من از آنها برای تبدیل به یک الگو استفاده خواهم کرد.

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

    4. قالب وردپرس چگونه کار می کند

    اگر به پوشه تم پیش فرض بروید ( wp-content/themes/default، فایل های php زیادی (به نام فایل های قالب) و یک فایل را خواهید دید style.css. برای تولید یک صفحه، وردپرس معمولا از چندین فایل قالب استفاده می کند ( index.php , header.php, sidebar.php,و footer.php).

    در Codex بیشتر بخوانید: «معماری سایت» و «سلسله مراتب قالب».

    5. فایل های قالب تکراری

    پوشه HTML را از GlossyBlue در پوشه کپی کنید wp-content/themes. پس از آن به دایرکتوری تم پیش فرض بروید، کپی کنید comments.phpو searchform.phpبه یک پوشه آبی براق.

    6 Style.css

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

    7. جداسازی فایل ها

    اکنون باید بفهمیم که کجا فایل‌های HTML را به قطعات تقسیم کنیم: header.php، sidebar.php، و footer.php. تصویر زیر یک نسخه ساده شده از فایل فهرست من و همچنین اصل تقسیم آن را نشان می دهد.

    8.Header.php

    باز کن index.html. شما باید بخش را از بالا به جایی که به پایان می رسد برش دهید، آن را در یک فایل php جدید قرار دهید و به عنوان ذخیره کنید. header.php.
    به پوشه تم پیش فرض بروید، یک پوشه جدید باز کنید header.php. تگ ها را در جایی که کد php لازم است کپی و جایگزین کنید: عنوان، پیوند، شیوه نامه، h1 و div class=description.

    منوی ناوبری (wp_list_pages) برچسب ها را جایگزین کنید لی V ul id=navبر ؛

    9. نوار کناری.php

    برگشت به index.html، کد را از جایی که شروع می کند برش دهید فرم id=فرم جستجوو قبل از بستن تگ div id = نوار کناری، آن را در یک فایل php جدید قرار داده و به عنوان ذخیره کنید نوار کناری.php.

    • جایگزین کردن فرم id=فرم جستجوبا تمام مطالب در .
    • برچسب ها را جایگزین کنید لیدسته ها در
    • برچسب ها را جایگزین کنید لیآرشیو در

    10. Footer.php

    برگشت به index.html. کد را از آنجا استخراج کنید div id=footerشامل برچسب div id=footer و تا انتها /htmlسپس یک مورد جدید قرار دهید footer.php.

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

    "آخرین نظرات""نظرات اخیر" ایجاد شده توسط افزونه (در پوشه تم موجود است)

    11.Index.php

    در حال حاضر در شما index.htmlفقط باید باقی بماند div id = محتوا. فایل را به عنوان ذخیره کنید index.php. خطوط را وارد کنید: get_header, get_sidebar، و get_footerبه ترتیبی که در قالب ظاهر می شوند.

    12. تجزیه و تحلیل چرخه

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

    13. چرخه کپی

    به دایرکتوری تم پیش فرض بروید، باز کنید index.php. چرخه کپی از استاندارد index.phpدر شما - بین div id=content../div. پس از آن، متن ایستا را با برچسب های قالب وردپرس جایگزین کنید: تاریخ ارسال، عنوان، دسته بندی، نظرات، لینک بعدی و قبلی.

    14. پیش نمایش تم

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

    15.Single.php

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

    16. Page.php

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

    17. حذف فایل های HTML

    تمام فایل های HTML را از پوشه حذف کنید آبی براق(دیگر به آنها نیاز نخواهیم داشت). این از نظر فنی برای ایجاد یک تم اصلی وردپرس کافی است. ممکن است متوجه شده باشید که فایل های PHP بیشتری در تم پیش فرض وجود دارد. خوب، اگر یک تم ساده می خواهید، واقعاً به همه آنها نیاز ندارید. به عنوان مثال، اگر search.phpیا 404.phpدر پوشه تم نخواهد بود، وردپرس به طور خودکار از آن استفاده می کند index.phpبرای نمایش صفحه برای جزئیات بیشتر سلسله مراتب الگو را بخوانید.

    18. قالب صفحه وردپرس

    برای مثال آخر، من به شما نشان خواهم داد که چگونه از الگوی صفحه برای ایجاد یک صفحه آرشیو استفاده کنید که تمام پست های وبلاگ شما را فهرست می کند (برای نقشه سایت مفید است). کپی 🀄 archives.phpاز پوشه تم پیش فرض کدهای غیر ضروری را حذف کنید و چیزی شبیه به این دریافت کنید:

    دسته بندی: . 4 نظر. تاریخ انتشار: 1391/11/24.

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

    برای ایجاد یک الگو، نیازی به دانش و دانش زیادی نداریم HTMLو css، فقط مقالات موجود در موضوعات این وبلاگ را مطالعه کنید. توجه ویژه ای باید به استفاده از تگ های DIV و تگ های SPAN شود.

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

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

    یک سند ایجاد کنید.

    حالا بیایید شروع به ایجاد طرح و ایجاد یک سند جدید کنیم. فایل را انتخاب کنید - ایجاد کنید. ابعاد سند را انتخاب کنید 960 بر 1600 پیکسل ها

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

    اکنون باید اندازه بوم را تغییر دهیم. برای این انتخاب می کنیم اندازه تصویربوم و اندازه بوم 1200 در 1600 پیکسل را انتخاب کنید. پس از آن با استفاده از ابزار Fill این ناحیه را با رنگ سفید پر کنید.

    گروه های قالب

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

    سربرگ سایت.

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

    مرحله بعدی این است که مرزهای خود را دقیق تنظیم کنید، دکمه سمت راست ماوس را انتخاب کنید و Refine Edge را انتخاب کنید. و تمام تنظیمات را مطابق تصویر تنظیم کنید.

    حالا " لایه ها - جدید - کپی در لایه جدید". حالا با ماوس لایه را می گیریم و روی نقاشی خود می کشیم.

    مرحله بعدی ورق زدن نقاشی است. برای این کار Edit-Transform-Rotate 90 درجه خلاف جهت عقربه های ساعت را انتخاب کنید. پس از آن، با فشار دادن دکمه سمت چپ ماوس، مانند شکل زیر باید لایه خود را جابجا کنید.

    اکنون باید میزان اشباع تصویر خود را افزایش دهیم و برای این کار به تب می رویم تصاویر - تنظیمات - رنگ/اشباع. اکنون باید روشنایی تصویر را به -100 کاهش دهیم. و این چیزی است که ما باید دریافت کنیم:

    حالا بیایید لوگوی وب سایت خود را بنویسیم. برای این کار باید یک فونت جدید نصب کنیم. فکر می کنم فایل منبع را قبلا دانلود کرده اید و یک فایل فونت نیز در آرشیو موجود است. اول از همه، باید فونت را از حالت فشرده خارج کنید. اکنون باید به پوشه برویم (اغلب درایو C: / windows - Fonts است).
    و تمام فایل های فونت را در آنجا کپی کنید. اکنون برنامه را ریستارت کنید و این فونت در دسترس شما قرار خواهد گرفت.
    حالا ابزار Text را انتخاب کنید و فونت خود را انتخاب کنید، رنگ آن سفید است و نزدیک راهنمای سمت چپ یک لوگو ایجاد می کنیم. این چیزی است که من دریافت کردم.

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

    بیایید یک لایه جدید ایجاد کنیم. حالا ابزار lasso straight را بردارید و دکمه اطراف یکی از برچسب ها را انتخاب کنید.

    و ناحیه انتخاب شده را با رنگ 2A2A2A پر کنید. حالا ترتیب لایه ها را تغییر می دهیم، لایه را با کتیبه بالای لایه با fill حرکت می دهیم.

    محتوای اصلی سایت.

    و حالا بعد از اینکه روی آن کلیک شد یک دکمه منو داریم. حال باید به پوشه Content رفته و یک لایه جدید در آن ایجاد کنیم.

    باز میکنیم شکل 3و زیر همه لایه ها قرار دهید. با کمک تبدیل، اندازه تصویر را تا جایی افزایش می دهیم که کل فضا را پر کند.

    حالا روشنایی و کنتراست بافت را تنظیم کنید. برای این کار دکمه ها را فشار دهید Ctrl+Shift+U. Image - Adjustment - Curves را انتخاب کنید.

    تنظیمات را مانند شکل انجام می دهیم.

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

    اکنون باید استروک را برای فیلد خود تنظیم کنیم. لایه ای را که تصویر ما در آن قرار دارد انتخاب کنید و روی دکمه "افزودن سبک لایه" کلیک کنید، Stroke را از منوی کشویی انتخاب کنید.

    و تنظیمات زیر را تنظیم کنید - ضخامت 1 پیکسل و رنگ c8c7c7.

    الان باز است تصویر 4، با کمک مقیاس گذاری اندازه را کاهش می دهیم، باید یک جایی ده پیکسل بیشتر از میدان سفید سمت راست و چپ باشد. در بالا و پایین باید 50-60 پیکسل تورفتگی داشته باشید.

    حالا دکمه های ترکیبی را فشار دهید Ctrl+Shift+Uبرای از بین بردن اشباع بافت، و تنظیم روشنایی با استفاده از منحنی ها. تنظیمات مانند تصویر

    لایه را با بوم سفید خود انتخاب کنید، کلیک راست کرده و " را انتخاب کنید پیکسل ها را انتخاب کنید».

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

    حالا یک ماسک برای همان لایه خاکستری ایجاد کنید.

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

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

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

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

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

    سکته.

    سایه.

    حالا بیایید چند متن سفارشی اضافه کنیم. در اینجا چیزی است که ما باید دریافت کنیم:

    حالا بعد از پایان مقاله ها باید 30 پیکسل و خاکستری (SSSSSS) را از هم جدا کنید. سپس چهار مربع 32 در 32 پیکسل رسم کنید و آنها را با 8E0A13 قرمز پر کنید.

    ترسیم فرم جستجو

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

    حالا یک دکمه قرمز به همان اندازه 32 در 32 و رنگ قرمز می کشیم و کلمه ” را وارد می کنیم. جستجو کردن».

    نوار کناری.

    روی یک لایه جدید، یک مستطیل به عرض 270 پیکسل بکشید و آن را با 1F1F1F پر کنید. همچنین عنوانی با همان عرض 270 پیکسل و ارتفاع 25 پیکسل اضافه می کنیم که با رنگ مشکی پر شده است.

    اکنون باید دسته بندی های وبلاگ را بنویسیم. متن با فونت Times New Roman و اندازه 16 پیکسل. برای هر آیتم منو باید یک عکس اضافه کنید. انتخاب کنید " رقم دلخواه» و شکل نقطه شطرنجی را انتخاب کنید « زیور 4و آن را با رنگ 818181 پر کنید.

    فوتر سایت

    با فوتر زیاد زحمت نخواهیم کشید، فقط کل قسمت را با رنگ مشکی پر کنید و منو را با فونت Times New Roman و اندازه 18 پیکسل و رنگ E6E6E6 اضافه کنید.

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

    همین چند سال پیش، خط جدیدی از خدمات ظاهر شد که به طور خودکار طراحی وب سایت شما را از یک فایل فتوشاپ تبدیل می کند. 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 برای شما مناسب است. این سرویس از پلتفرم های محبوبی مانند وردپرس، بلاگر، دروپال، جوملا و مجنتو پشتیبانی می کند.

    بیشتر بخوانید: