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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 صادر کنید.

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

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

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

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

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

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

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

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

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

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

پس بیایید شروع کنیم.

1. بیایید یک سند خالی ایجاد کنیم.

2. فورا آن را ذخیره کنید. به منوی "File" (File) بروید و دستور "Save as ..." (Save as ...) را انتخاب کنید. کادر محاوره ای Save as type باز می شود که باید در قسمت Save as type نوع Document Template (*.dot) را انتخاب کنیم.

پوشه Templates باز می شود، جایی که تمام قالب ها به طور پیش فرض ذخیره می شوند. نام فایل را انتخاب کنید و روی دکمه "ذخیره" کلیک کنید.

3. ما تعیین می کنیم که کدام عناصر (متن و گرافیک) و دقیقاً کجا در سند قرار می گیرند.

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

4. نام سازمان را در قسمت بالای سند در مرکز قرار می دهیم. برای انجام این کار، نام سازمان ما را با حروف بزرگ چاپ کنید، به عنوان مثال، "شب های سفید" LLC. کلید Enter را فشار دهید و به یک خط جدید بروید.

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

لطفا توجه داشته باشید: ممکن است یک بوم به اصطلاح درج شده باشد - یک منطقه نقطه چین برای درج اشکال / تصاویر. برای خلاص شدن از شر درج بوم، به منوی "Tools" رفته و دستور "Options" را انتخاب کنید. روی تب General کلیک کنید و تیک گزینه Automatically create drawing canvas when inserting AutoShapes را بردارید. روی "OK" کلیک کنید و پنجره "Options" را ببندید.

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

7. می توانید خط را همانطور که هست رها کنید یا می توانید ظاهر ظریف تری به آن بدهید. برای انجام این کار، در پانل طراحی یک دکمه مربوطه "سبک خط" (سبک خط) وجود دارد. روی آن کلیک کنید و هر نوع را انتخاب کنید.

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

9. حالا متن تایپ شده را با توجه به ایده های خود قالب بندی کنید. به عنوان مثال، نام سازمان را انتخاب کردم و سبک "هدینگ 1" (هدینگ 1) را به آن اختصاص دادم. عنوان را نیز در مرکز قرار دادم و بین حروف پنج نقطه فاصله گذاشتم.

اندازه فونت متن زیر خط را به 9 نقطه کاهش دادم و آن را در مرکز قرار دادم. در تصویر زیر می توانید یک نمونه را مشاهده کنید.

بنابراین، ما یک بخش دائمی (تغییر ناپذیر) از قالب خود ایجاد کرده ایم که اصطلاحاً "هدر" نامیده می شود. حالا بیایید ادامه دهیم و فیلدهایی را ایجاد کنیم که بعداً داده های خود را جایگزین می کنید.

در سمت چپ الگو در زیر "هدر" دوبار کلیک کنید و نام شهر، به عنوان مثال، مسکو را تایپ کنید. سپس در قسمت مقابل (راست) الگو، دوباره دوبار کلیک کنید و تاریخ را در نقطه ای که مکان نما چشمک می زند وارد کنید. برای این:

1. در منوی "Insert" (Insert) دستور "Date and time" (Date and Time) را انتخاب کنید. پنجره ای باز می شود که در آن فرمت نمایش تاریخ مورد نظر را انتخاب می کنید، برای مثال 18 جولای 2006.

2. کادر «به‌روزرسانی خودکار» (به‌روزرسانی خودکار) را علامت بزنید. اکنون، هنگام ایجاد یک سند جدید بر اساس این الگو، تاریخ از قبل مطابق با زمان فعلی در رایانه شما قرار داده می شود.

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

4. در منوی "Insert" (Insert) دستور "Field" (Field) را انتخاب کنید. پنجره ای باز می شود که در تصویر زیر نشان داده شده است:

5. در قسمت Categories، Document Automation را انتخاب کنید. در قسمت "نام فیلدها"، دستور MacroButton را انتخاب کنید. در قسمت "پیام" (نمایش متن)، متن "درج نام گیرنده" را تایپ کنید و روی OK کلیک کنید.

به بیان دقیق، در ناحیه "Macro Name"، NoMacro (یعنی دستوری بدون ماکرو) باید نشان داده می شد، اما این در لیست نبود. بنابراین، ما آن را همانطور که هست رها می کنیم، حداقل من هرگز با هیچ خطایی مواجه نشده ام.

6. یک فیلد با متن خود دریافت می کنیم.

اگر این فیلد به صورت متن ساده و بدون سایه نمایش داده می شود، توصیه می کنم چنین سایه اندازی را انجام دهید. این به شما این امکان را می دهد که بعداً فیلدهای ورودی داده های مورد نیاز را در سند تعریف کنید. برای انجام این کار، به منوی «ابزارها» رفته و دستور «گزینه‌ها» را انتخاب کنید و در برگه «نمایش» در گروه «نمایش» از قسمت فهرست سایه زدن (فیلد سایه‌زنی) گزینه همیشه (همیشه) را انتخاب کنید.

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

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

به عنوان مثال، می توانید به اسکرین شات قالبی که من گرفتم نگاهی بیندازید:

حال برای استفاده از این الگو برای ایجاد حرف، باید به منوی «فایل» (File) رفته و دستور «ایجاد» (جدید) را انتخاب کنید. یک صفحه کار در سمت راست ظاهر می شود که در آن باید گزینه "الگوهای رایج" (در رایانه من) را انتخاب کنید. پنجره ای با تمام قالب های موجود باز می شود. قالبی را که ایجاد کردید انتخاب کنید و روی "OK" کلیک کنید. یک سند جدید بر اساس الگوی شما در Word بارگذاری می شود. جزئیات خود را به فیلدهای مناسب اضافه کنید و از اتوماسیون لذت ببرید.

سلام، دوستان و خوانندگان عزیز - سایت!

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

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

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

آماده سازی برای ایجاد یک قالب برای وردپرس.

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

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

از نظر ویرایش و ویرایش کد، من به شدت توصیه می کنم از - Notepad ++ استفاده کنید. به لطف برجسته سازی کد و رابط کاربری ساده، این برنامه توسط بیشترین تعداد وب مستر ترجیح داده می شود.

به دایرکتوری ریشه حاوی نصب های وردپرس خود بروید، به wp-content => themes بروید و در آنجا یک پوشه به نام New Theme 3.0 ایجاد کنید. در داخل این پوشه، فایل های زیر (پسوندها - PHP، CSS، PN G) را قرار دهید:

Step-1 style.css

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

این اطلاعات در هر زمان ممکن است تغییر کند. نکته اصلی این است که همه چیز باید نظر داده شود ().

حال در این فایل باید تعاریف اولیه سبک را ایجاد کنیم که بعداً در برخی از فایل‌های PHP موضوع وردپرس پیاده‌سازی می‌شوند:

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

#wrapper - مسئول اندازه کامل صفحه وب خواهد بود. با #هدر، بدیهی است که این عنوان است، و #وبلاگ، اینها آخرین پست های صفحه اصلی هستند.

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

مرحله 2 header.php.

اکنون یک فایل - ایجاد می کنیم که حاوی لوگو و پیمایش معمول است:

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

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

مرحله 3 افزودن ناوبری سفارشی

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

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

برای ایجاد یک منو، باید یک خط زیر کد نوشته شده قبلی در فایل اضافه کنید:

بیایید کمی آن را تجزیه کنیم. تابع اصلی مورد استفاده در اینجا wp_nav_menu است. متغیرهای sort_column، container_class و theme_location به عنوان آرگومان استفاده می شوند. Sort_column - ترتیب نمایش را که در پنل مدیریت تنظیم شده است را تضمین می کند. container_class - به شما امکان می دهد منوی خود را انتخاب کنید. خوب، theme_location به سادگی منوی اصلی را روی مقادیری تنظیم می کند که ما در زمان واقعی دستکاری می کنیم.

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

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

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

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

در .nav ul ul موقعیت را روی absolute قرار می دهیم و اولین لینک کشویی را 100% می کنیم تا زیر لینک اصلی ظاهر شود. همچنین پس‌زمینه پنجره کشویی را طوری تغییر دادیم که با پس‌زمینه موجود متفاوت باشد. به مقادیر کلی، ویژگی z-index:99999 اضافه شده است که باعث می‌شود پیوندهای کشویی بالاتر از اشیاء دیگر گسترش یابند.

در این مورد، افزودن سبک برای منوی سفارشی قالب وردپرس به پایان رسید.

مرحله 5 index.php.

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

خطوط کد زیر برای نمایش تمام اطلاعات در , sidebar.php و footer.php در جایی که آنها را در قالب وردپرس خود قرار می دهید استفاده می شود:

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

.

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

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

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

گام-7 نوار کناری.php.

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

بله، این همه کدی است که باید به sidebar.php اضافه شود تا کاربردی شود. حالا معنای آن را توضیح می دهم.

با div، ما استایل ها را از .

اما، مانند بسیاری از توابع، برای اینکه کار کند، باید کد زیر را در فایل functions.php بنویسید:

این کد به سادگی به وردپرس می گوید که نوار کناری را که در sidebar.php اعلام کرده ایم ثبت کند. به عنوان یک مقدمه کلی، وردپرس به راحتی می تواند در یک موضوع واحد با چندین نوار کناری اجرا شود.

single.php چیزی است که برای یک صفحه پست استفاده می شود. کد زیر بسیار شبیه به کدی است که در index.php قرار داده ایم. تنها تفاوت این است که ما یک قالب نظر با یک div و کد اضافه کرده ایم که باید شامل comments.php باشد:

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

کد زیر باید در فایل comments.php شما قرار داده شود:

این یک فرم نظر استاندارد به پست های شما اضافه می کند.

در فایل page.php کدی را قرار می دهیم که مسئول صفحات استاتیک سایت ما خواهد بود. این تقریباً مشابه نمونه موجود در single.php خواهد بود. تنها تغییر حذف الگوی نظر و افزودن کدی است که صفحات را به جای پست ها رندر می کند. همه چیزهای دیگر یکسان خواهد بود:

فایل category.php برای نمایش پست هایی از یک دسته یا آرشیو خاص که توسط خواننده قابل دسترسی است استفاده می شود. در اینجا، بخش عمده کد شبیه به page.php و single.php خواهد بود که در بالا کد کردیم، به جز یک قطعه در همان ابتدا:

قطعه کد زیر تنها چیزی است که بعد از حلقه اصلی اضافه کردیم:

در اینجا ما از مجموعه ای از عبارات if/elseif در PHP استفاده می کنیم که نشان می دهد شما چه چیزی را در وبلاگ مشاهده می کنید. به عنوان مثال، اگر به دسته ای به نام - "" نگاه کنیم، آنگاه در بایگانی h2 از دسته: "" در مقابل همه ورودی ها نشان داده می شود و آنها را بر اساس تاریخ یا نویسنده تقسیم می کند.

مرحله 12 سفارشی کردن پس زمینه سایت.

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

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

برای تکمیل ساخت قالب وردپرس، با استفاده از #footer که در اعلان شده بود، یک کد به footer.php اضافه می کنیم. پاورقی ما فقط حاوی اطلاعات اولیه حق نسخه برداری و همچنین فید RSS از اخبار و نظرات است:

روی این کار ساخت ساده ترین قالب (موضوع) برای وردپرس به پایان رسید.

برای بررسی عملکرد آن، می توانید بایگانی را با موضوع ایجاد شده دانلود کرده و آن را در منبع خود فعال کنید:

آیا موفق به ایجاد اولین قالب وردپرس خود شده اید؟

دوستان در حین نوشتن پست جدید می توانید مطالب زیر را مطالعه کنید:

برای امروز کافیه.

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

تا مطالب جدید...

با احترام، دنیس چرنیکوف!

جالب در مورد موضوع:

لطفا یک کار خیر انجام دهید، وبلاگ را به دوستان خود معرفی کنید:

96 نظر شما چی فکر میکنید؟

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

دنیس چرنیکوف پاسخ داد:
نوامبر 3, 2012 در 02:38 ب.ظ

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

الکساندر کراسیلنی پاسخ داد:
نوامبر 3, 2012 در 03:13 ب.ظ

بله، متوجه شدم که مقاله کوچک نیست و تفاوت های ظریف زیادی دارد. اگر به آنها توجه نشود همه چیز خراب می شود! دوست من صرفاً به چیدمان می پردازد، او در دفتر می نشیند و حقوق مناسبی دارد، در منطقه 4000-5000 UAH. با این حال او خودآموخته است! بنابراین من یک آرزو دارم، اما زمان کافی وجود ندارد ... = (

بایگانی نصب نشد. PCLZIP_ERR_BAD_FORMAT (-10): امضای End of Central Dir Record پیدا نشد

در اینجا چیزی است که بعد از اینکه می خواستم این موضوع را تست کنم نوشته شده است. اینجا چه خبر است؟

با احترام و سپاس، یوجین!

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

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

جولیا پاسخ داد:
نوامبر 4, 2012 در 6:47 ق.ظ

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

و یه چیز دیگه اسکرین شات ها همه کدها را نشان نمی دهند.

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

با احترام، یوجین!

سپاس گذارم برای اطلاعات. حتما تلاش خواهم کرد.

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

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

دنیس، و موضوع مفید است، و چشم ها می ترسند ...

هنگام نشانه گذاری ...

به طور تصادفی دیدم، اما من خیلی خوشحالم! از شما به خاطر اطلاعات خیلی ممنونم.

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

دنیس، آیا سعی کرده ای رنگ ستون های کناری را تغییر بدهی؟ یا نحوه انجام آن با جزئیات بیشتر در css

با تشکر بسیار برای این مقاله است. به دنبال اطلاعات مناسب برای سفارشی کردن قالب WP بود. در بیشتر موارد، فقط عبارات کلی و بدون جزئیات، اما در مورد شما موضوع متفاوت است!

دنیس یه جاهایی کدت به خاطر حجم عکس خراب میشه... و خوشحالی خیلی نزدیک بود!

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

دنیس، سلام!

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

پیشاپیش متشکرم

دنیس چرنیکوف پاسخ داد:
19 مارس 2013 در 03:45 ب.ظ

سلام لیودمیلا!

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

لودمیلا پاسخ داد:
19 مارس 2013 در 03:57 ب.ظ

باشه، ممنون!

از نظر ویرایش و ویرایش کد، من به شدت توصیه می کنم از - Notepad ++ استفاده کنید.

من از Sublime Text 2 استفاده می کنم - چیزی بین NotePad++ و TextMate بدنام (سیستم عامل مک). پروژه را به داخل پنجره می کشم و به شکل درخت ظاهر می شود. خیلی راحت! به علاوه یک سری ویژگی های دیگر که زندگی را آسان تر از NotePad++ می کند! به شدت توصیه می شود))

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

خیلی ممنون! من سعی می کنم همه چیز را همانطور که نوشته شده انجام دهم! ظاهر فردی بسیار بهتر است))

عصر بخیر. من مبتدی هستم و برای من کاملاً مشخص نیست که چگونه در ""ایجاد پوشه ها و فایل های لازم"" "" فایل های زیر را در داخل این پوشه قرار می دهم (پسوندها - PHP، CSS، PNG) "" من از طریق Notepad ++ پرینت گرفتم و نحوه انتقال ؟؟؟

سلام دوباره...چطور این کار رو انجام بدم؟؟؟؟:

در داخل این پوشه، فایل های زیر (پسوندها - PHP، CSS، PNG) را قرار دهید:

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

من نمی توانم بفهمم چگونه فایل ها را در پوشه قرار دهم. نحوه انتقال فایل ها از Notepad++ به یک پوشه.

چرا من آواتار شیطانی دارم من در کل مهربان هستم چگونه می توانم آن را تغییر دهم ؟؟؟

سلام دنیس! من یک مبتدی هستم، لطفا به من بگویید چگونه یک تم را در ورد پرس فایل کنم، در ظاهر / تم ها تم من نمایش داده نمی شود ... ((((

با تشکر، مقاله کمک زیادی کرد!

فقط آن را به footer.php اضافه کنید، در غیر این صورت پنل مدیریت بدون آن قابل مشاهده نیست.

دنیس، روز بخیر!

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

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

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

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

سرگئی پاسخ داد:
23 مارس 2014 در 1:50 بامداد

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

دنیس چرنیکوف پاسخ داد:
23 مارس 2014 در 12:12 ب.ظ

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

سرگئی پاسخ داد:
23 مارس 2014 در 23:59

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

راهنما، من نمی توانم styles.css را از پنل مدیریت ویرایش کنم. من به "ظاهر - ویرایشگر" می روم، یک فایل سبک را انتخاب می کنم، اما خالی باز می شود. همه چیز از طریق FTP ویرایش می شود، اما برای من راحت نیست.

کمک به آپلود یک سایت خودنویس در WP (من پرداخت می کنم)

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

اما در حال حاضر یک تم آماده برای سایت انتخاب شده است و من کاملاً "قوری" هستم ... از کمک شما بسیار سپاسگزار خواهم بود! در صفحه "A". صفحه index.php را کپی کردم، یک خط کد به آن اضافه کردم و صفحه A را به عنوان الگو انتخاب کردم. حالا فقط ورودی های لازم روی آن نمایش داده می شود اما همه طرح ها افتاده است ...) برای اینکه طراحی این صفحه با طراحی سایت تفاوتی نداشته باشد، آیا باید چیزی به استایل شیت اضافه کنید؟ یا از اول اشتباه کردم؟ متشکرم)

دنیس چرنیکوف پاسخ داد:
30 مارس 2014 در 21:35

النا، من چنین توصیه ای نمی کنم! من نمی دانم شما در آنجا چه می کنید، اما توضیحات همیشه واضح نیست!

النا پاسخ داد:
آوریل 1, 2014 در 04:51 ب.ظ

دنیس، من این سوال را تغییر می دهم: آیا می توان مقالات را فقط از عنوان "الف" در صفحه با نام "الف" و فقط مقاله هایی از عنوان "B" در صفحه با نام "B" نمایش داد. ? متشکرم.

سرگئی پاسخ داد:
30 مارس 2014 در 22:37

النا مطمئن نیستم که این برای شما مناسب باشد یا خیر، اما من با کمک 2 افزونه مشکل شما را حل می کنم Display Widgets افزونه ای است که نمایش ویجت ها را در هر صفحه ای که نیاز دارید تعیین می کند و این ویجت پست های اخیر Extended باعث زیبایی خروجی اخبار، اما تکرار می کنم که این کار را انجام خواهم داد

سرگئی پاسخ داد:
30 مارس 2014 در 22:41

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

النا پاسخ داد:
آوریل 1, 2014 در 17:16

سرگئی، از پاسخ شما متشکرم! من افزونه Recent Posts Widget Extended را امتحان کردم. یک چیز مفید) من دقیقا همین خروجی مقالات را می خواهم اما نه در ویجت ها بلکه در صفحه اصلی) ممنون!!

دنیس لطفا در این مورد به من کمک کن.

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

فکر می کردم هنگام کار با فایل ها چیزی از دست داده ام، اما نه ...

من اورجینال شما رو نصب کردم همین مشکل رو بهم بگید مشکل از چی میتونه باشه خیلی ممنون میشم.

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

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

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

سوال: چگونه نوار کناری را طوری حرکت دهیم که در سمت چپ باشد و سوال دوم: آیا مقاله ای در مورد نحوه قرار دادن تصاویر خود در قالب خود دارید (یعنی طرح در PSD قبلا بریده شده است، می خواهم آن را با الگو ادغام کنید).

پیشاپیش از پاسخ شما تشکر میکنم.

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

نحوه ایجاد یک قالب وردپرس منحصر به فرد - شروع کار

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

1. تغییر تصاویر
2. نام قالب را تغییر دهید.
3. تغییرات جزئی در استایل ها ایجاد کنید.

بیایید با هر مورد به ترتیب شروع کنیم.

تغییر تصاویر

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

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

• اولین مورد از طریق خود پنل مدیریت است.
• مورد دوم از طریق کد است.

اگر اصل را درک کنید، پس احترام زیادی قائل هستید.

از طریق پنل مدیریت

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

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

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

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

تغییر تصاویر به صورت دستی

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

این سیستم برای همه موضوعات معتبر است.

ما روی عنصر کلیک راست می کنیم و با استفاده از ابزار "view code" خروجی آن را در کد جستجو می کنیم.

1. خود عنصر، روی آن راست کلیک کنید.
2. "مشاهده کد" را انتخاب کنید.
3. این خود کد خروجی HTML است، ما به آن توجه نمی کنیم.
4. اینجا آدرس عزیزی است که باید با یک جایگزین به آنجا بروید. فایل bubble.png مورد نظر که در پوشه images در خود موضوع قرار دارد.

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

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

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

همانطور که متوجه شدید، در صورت عدم وجود تنظیمات در پنل مدیریت، با این روش می توانید هر تصویری را تغییر دهید.

نام قالب را تغییر دهید

شما فقط می توانید در تم های رایگان تغییر دهید، این مهم است.

دو کار وجود دارد:

• تغییر عنوان در فایل style.css
• نام پوشه تم را تغییر دهید.

بازنویسی عناوین در style.css

برای انجام این کار، به ویرایشگر ( یادآوری ظاهر-ویرایشگر) و style.css را پیدا کنید.

روی صفحه ما کتیبه را می بینیم، همه چیز باید در اینجا تغییر کند. در ابتدای هر فایل style.css، در همان ابتدا، اطلاعات مربوط به قالب موجود است. حداقل باید به این خطوط تغییر کند.

نام تم: moi-shablon توضیحات: نسخه استاندارد 1.. مجوز: GPL

پس از تعویض باید به این شکل باشد.

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

خوب، اجازه دهید به نقطه بعدی برویم.

نام پوشه تم را تغییر دهید

ما این کار را از طریق مدیر فایل انجام می دهیم، من Filezilla دارم. در پاراگراف قبل، نام موضوع در خط تغییر کرد:

نام تم: قالب moi

نیاز به نام اصلی بیست و یازدهتغییر به جدید، در مورد من، قالب منبه پوشه FileZilla بروید تم ها، و نام اصلی twentyleven را پیدا کنید.

و ما آن را به جدید تغییر می دهیم.

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

تغییرات جزئی در سبک

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

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

1. عنصر مورد نظر برای ویرایش را انتخاب کنید. دکمه سمت راست ماوس را فشار می دهیم.
2. روی "مشاهده کد" کلیک کنید.
3. کل سبک این هدر.
4. نام سبک مورد نظر

فایل style.css را باز کنید. ما با استفاده از کلید ترکیبی CNTRL + F به دنبال نام سبک هستیم.

می‌خواهم فونت را بزرگ‌تر کنم، زیر آن یک خط ثابت ایجاد کنم، رنگ و ضخامت متن را تغییر دهم. برای این کار، این پارامترها را تغییر داده یا اضافه می کنم.

رنگ: #1a1a1a; اندازه فونت: 15px; وزن فونت: 600 border-bottom: 2px solid #271eb1;

بیایید نگاهی به خطوط کد بیندازیم.

1. تغییر رنگ.
2. تغییر سایز.
3. تغییر عرض متن
4. اضافه کردن خط زیر.

بر این اساس، پارامترهایی را به استایل تغییر می دهیم یا اضافه می کنیم. باید اینجوری بشه

تمام تغییرات بلافاصله در سایت ظاهر می شود.

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

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

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

اگر سوالی دارید، لطفا در نظرات بپرسید. موفق باشید.

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

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

پس بیایید شروع کنیم.

توزیع کد در بین فایل ها

1. قالب را دانلود کرده و در پوشه تم های وردپرس خود از حالت فشرده خارج کنید (آدرس مانند blog_url_wordpress/wp-content/themes/). در صورت تمایل، نام پوشه تم را به دلخواه تغییر دهید. به عنوان مثال، قالب من در واقع شده است wordpress_blog_url/wp-content/themes/MyTheme/.

2. نام فایل را تغییر دهید styles.cssکه در style.css.

3. باز کنید style.cssدر یک ویرایشگر کد (مانند Notepad++) و در همان ابتدا، خطوط زیر را بچسبانید:

/* نام تم: MyTheme URI Theme: http://test1.ru نویسنده: NoName URI نویسنده: http://test1.ru توضیحات: نمونه آزمایشی نسخه: 1.0.0 مجوز: GNU General Public License v2 یا بالاتر URI License : http://www.gnu.org/licenses/gpl-2.0.html */

همانطور که ممکن است حدس بزنید، این اطلاعات مربوط به موضوع است: عنوان، نویسنده، توضیحات، مجوز، نسخه، و غیره. داده های دیگر

4. فایل ایجاد کنید header.php, index.php, نوار کناری.php, footer.phpو کد را روی آنها توزیع کنید index.html.

4.1. AT header.phpکد را خط به خط کپی کنید از آنجایی که این فایل مسئولیت بالای سایت را بر عهده دارد. styles.cssجایگزین در کد با style.css- نام فایل معتبر جدید

4.2. AT index.phpکد بلوک اصلی (از خط خط به خط ).

4.3. AT نوار کناری.phpکد منوی کناری را کپی کنید (از بر ).

4.4. AT footer.phpبقیه خطوط را بچسبانید (با تا انتهای سند index.html).

5. حذف کنید index.html.

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

هدر را تطبیق دهید

اکنون از یک قالب ثابت شروع می کنیم تا یک تم پویا ایجاد کنیم که داده ها و تنظیمات وردپرس در آن بارگذاری می شوند.

این قالب حاوی درج های PHP خواهد بود. این کد با شروع می شود. بین آنها کد PHP وجود دارد که اغلب توابع CMS را فراخوانی می کند.

1. فایل header.php را باز کرده و کد موجود در آن را تا بلوک جایگزین کنید

به بعدی:

> "> "> "type="text/css" media="screen" />

ما بلوک را پویا کردیم

کد تابعی را فراخوانی می کند که ویژگی های زبان را به ظرف برمی گرداند.

">

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

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

2. به ویرایش فایل index.php ادامه دهید. در همان ابتدا بنویسید

,

خطوط هدر، نوار کناری و فایل های پاورقی را فراخوانی می کنند.

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

پویا کردن منوی بالا

تا کنون، ما یک تم کاملا ثابت، از جمله با همان منوی بالای افقی داریم. در حالی که نمی توان آن را از پنل مدیریت پیکربندی کرد، و اگر کد را به شکل فعلی خود رها کنید، باید هر بار فایل را برای درج / حذف / انتقال موارد ویرایش کنید. header.phpکه بسیار ناخوشایند است.

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

به طوری که به نظر می رسد این است: