نحوه گسترش صفحه در وردپرس. تغییر عرض تم وردپرس

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

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

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

مرورگر اینترنت موزیلا فایرفاکس..
پلاگین Firebug نصب شده در فایرفاکس.

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

پنل ساده

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

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

شما می توانید با خیال راحت با هر مورد و مقادیر آزمایش کنید. تغییرات جاری نمی تواند صفحه شما را بر روی سرور تاثیر بگذارد، آنها تنها در پنجره پلاگین (Cache Mazyl Current Cache) فعال هستند. هنگام به روز رسانی، تمام تنظیمات تنظیم مجدد می شوند.

قوانین style.css

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

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

برای آن ممکن است لازم باشد اندازه قالب را تغییر دهید.

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

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

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

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

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

صفری
فایرفاکس
گوگل کروم.

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

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

برای تغییر عرض منوی سمت چپ.

در این مورد، شما می توانید هر دو پیکسل را تغییر دهید، همانطور که ما در پاراگراف 3-5 و درصد در صفحه انجام دادیم. برای انجام این کار، به اندازه کافی برای تغییر پارامتر به جای پیکسل ها کافی است

1	عرض: 31.8٪؛

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

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

چگونگی بزرگنمایی الگوی افقی قسمت 2، عرض را تغییر دهید

بعد از اینکه اعداد را درک می کنیم، آنها را در جایی در برگ ثبت کردیم، اکنون آنها را برای همه تغییر دهید، و نه فقط برای خودتان. برای این:

به FTP به سایت بروید
پیدا کردن و کپی به کامپیوتر / WP-content / themes / تم / style.css خود را
تهیه نسخه پشتیبان از این فایل، I.E. آن را به پوشه اسناد من کپی کنید. برای ساخت دو نسخه از فایل، یکی که ما کار خواهیم کرد، دوم که ما آن را لمس نخواهیم کرد. دوم در صورتی که ما چیزی اشتباه را تغییر دهیم و این را فراموش کنیم.
فایل را در یک ویرایشگر مناسب باز کنید. حالا ما یک کار بسیار ساده برای تغییر ارزش های قدیمی به موارد جدید داریم. دو راه وجود دارد، اولین نور دوم سنگین است. اولین جستجو برای ارزش قدیمی است و به جای آن یک جدید بنویسید. راه دوم - ما به دنبال نام سبک ها، در داخل سبک به دنبال عرض و تغییر مقدار.

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

اولین کسی مسئول عرض سایت است:

1 2 3 4 5 6 7 8

#page (Min-Height: 100px؛ روشن: هر دو؛ عرض: عرض: 96٪؛ Padding: 0؛ Padding- بالا: 24px؛ حداکثر عرض: 980 پیکسل؛ سرریز: پنهان؛

#page (Min-Height: 100px؛ پاک کردن: هر دو؛ عرض: 96٪؛ پودر: 0؛ Padding-top: 24px؛ حداکثر عرض: 980 پیکسل؛ سرریز: پنهان؛

دوم عرض دو عنصر، لیست مقالات، و منوی سمت چپ:

1 2 3 4 5 6 7 8 9 10 11

. Main-container (عرض: 980 پیکسل؛ حاشیه: 0 خودکار؛ سرریز: پنهان؛ Padding: 0؛ سابقه و هدف: #fff؛ موقعیت: نسبی؛ - جعبه وب سایت - سایه: 0px 0px 10px RGBA (50، 50، 50، 0.17) ؛ - Moz-box- Shadow: 0px 0px 10px RGBA (50، 50، 50، 0.17)؛ جعبه سایه: 0px 0px 10px RGBA (50، 50، 50، 0.17)؛)

کانتینر اصلی (عرض: 980 پیکسل؛ حاشیه: 0 خودکار؛ سرریز: پنهان؛ Padding: 0؛ سابقه و هدف: #fff؛ موقعیت: نسبی؛ -Webkit-Box-Shadow: 0px 0px 10px RGBA (50، 50، 50، 0.17) ؛ -moz-box-shadow: 0px 0px 10px RGBA (50، 50، 50، 0.17)؛ جعبه سایه: 0px 0px 10px RGBA (50، 50، 50، 0.17)؛)

همه چیزهایی که ما باقی مانده ایم تا ارزش های 980 تا 1080 را تغییر دهیم و دوباره دانلود کنیم.

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

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

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

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

برای مثال، عرض عرض منطقه اصلی با 550 پیکسل، تا 620. برای انجام این کار، شما باید تغییرات را به رشته انجام دهید عرض: 550 پیکسل فایل style.css. اگر موضوع قبلا نصب شده باشد، می توانید این فایل را به طور مستقیم از مدیر ویرایش کنید، اگر نه، شما باید بایگانی را با موضوع باز کنید و با استفاده از ویرایشگر تغییر دهید. در مورد ما، موضوع نصب شده است، بنابراین ما وارد می شویم قمقمه— ظاهر — سردبیر - فایل style.css را باز کنید، ما عرض را پیدا می کنیم: رشته 550 پیکسل را تغییر دهید و مقدار عرض 550 پیکسل به 620 پیکسل را تغییر دهید. ژمم به روز رسانی فایل.

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

\u003e. در پرونده style.css، ما می بینیم که عرض نوار کناری به طور خاص از اموال استفاده نمی شود. عرضاما استفاده حاشیه: 0 0 0 580 پیکسل؛

ما روش های تنگ را با ویرایش style.css انجام می دهیم، همانطور که در مورد قبلی با منطقه اصلی، فقط رشته را ویرایش می کنیم حاشیه: 0 0 0 580 پیکسل؛ما ارزش بروز از 580 پیکسل به 630 پیکسل را تغییر می دهیم. حالا همه چیز خوب است منطقه سوابق گسترده تر شده است و به منطقه اجرا نمی شود نوار کناری. همچنین اتفاق می افتد که سبک ها نه تنها در فایل style.css، بلکه در فایل نیز نوشته شده است screen.css

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

روش 1: با استفاده از قالب عرض ساخته شده در تم وردپرس
این روش توصیه می شود اگر تم وردپرس شما در حال حاضر با یک قالب صفحه کامل مجهز شده است. اگر شما آن را ندارید، با انتخاب بعدی خود تماس بگیرید و آن را دریافت کنید.
اول، شما باید صفحه را ویرایش کنید یا یک نفر را با بازدید از آن ایجاد کنید " صفحات\u003e افزودن صفحه جدید
در پنجره ویرایش صفحه، را انتخاب کنید تمام عرض به عنوان یک الگو تحت ویژگی های صفات صفحات.
پس از انتخاب مدل تمام عرضشما باید صفحه خود را ثبت کنید. شما می توانید پیکربندی صفحه را ادامه دهید تا محتوای بیشتری را اضافه کنید یا روی آن کلیک کنید پیش نمایشبرای دیدن آن در عمل.
اگر شما گزینه "عرض کامل" را ندارید - "قالب کامل عرض" - در صفحه ویرایش صفحه خود، این به این معنی است که موضوع وردپرس شما این صفحه را ندارد.
اما نگران نباشید، ما به شما نشان خواهیم داد که چقدر آسان است که یک صفحه کامل را بدون تغییر تم وردپرس ایجاد کنید.
روش 2: نحوه ایجاد صفحه صفحه با عرض کامل
این روش شما را از ویرایش فایل های وردپرس که استفاده می کنید، و برای درک پایه ای از PHP، CSS و HTML نیاز دارید.
به هر حال، ما همچنین از شما دعوت می کنیم که با آن مشورت کنید
ابتدا باید باز شود ویرایشگر متن، مانند "دفترچه یادداشت"، و کد زیر را به یک فایل خالی وارد کنید:

این کد به سادگی نام قالب فایل را تعریف می کند و از WordPress درخواست می کند تا قالب عنوان را حذف کند.
سپس شما به بخشی از محتوای کد نیاز دارید. با استفاده از سرویس گیرنده FTP به سایت خود وصل شوید ( یا مدیر فایل در cPanel) سپس برو به / WP Content / Topics / کاتالوگ موضوعی / .
سپس باید فایل را به نام " صفحه " این فایل پیشنهادی صفحه پیش فرض برای موضوع شماست.
همه چیز را بعد از عملکرد کپی کنید " get_header () و آن را به فایل وارد کنید width.php کامل که شما در رایانه خود ایجاد کردید.
حالا شما باید محتویات فایل "full-width.php" را ببینید و این رشته کد را حذف کنید:

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

سپس شما باید فایل را دانلود کنید width.php کامل در پوشه تم وردپرس خود را با.
شما با موفقیت ایجاد کرده و یک صفحه سفارشی کامل صفحه صفحه را برای موضوع خود دانلود کرده اید. گام بعدی استفاده از این الگو برای ایجاد یک صفحه کامل است.
به نوار ابزار بروید و یک صفحه جدید را ویرایش یا ایجاد کنید.
در صفحه ویرایش صفحه، کادر تأیید صفحات صفحه را پیدا کنید و روی منوی کشویی زیر گزینه "مدل" کلیک کنید.
شما می توانید مدل خود را ببینید. به جلو، آن را انتخاب کنید و صفحه را ذخیره یا به روزرسانی کنید.
حالا شما می توانید از وب سایت خود بازدید کنید، و شما خواهید دید که پانل های جانبی ناپدید شده اند، و صفحه شما به عنوان یک صفحه با یک ستون نمایش داده می شود. شاید او هنوز پر نشده است، اما اکنون آماده است تا آن را به طور متفاوتی گسترش دهید.
سایت خود را محبوب، کشف کنید
شما باید از ابزار بازرسی برای شناسایی کلاسهای CSS استفاده شده توسط موضوع خود برای تعیین منطقه محتوا استفاده کنید.
سپس می توانید پهنای خود را به 100٪ با استفاده از CSS پیکربندی کنید. ما از کد CSS زیر استفاده کردیم:
قالب نرم افزار FULL WIDTH ZONE .CONTENT (عرض: 100٪؛ حاشیه: 0 پیکسل؛ مرز: 0 پیکسل؛ Uphony: 0px؛). قالب کامل عرض
این همان چیزی است که آن را به نظر می رسد بیست و هفتاد.
این همه برای این درس است، امیدوارم بتوانید صفحات کامل را ایجاد کنید.
روش های فوق برای کسانی که می توانند هزینه کنند، رایگان هستند و می خواهند به سرعت طرح های کامل یا کامل را ایجاد کنند.
همچنین چند پلاگین حق بیمه وردپرس را کشف کنید
شما می توانید سایر پلاگین های وردپرس را برای ارائه یک نگاه مدرن و بهینه سازی مدیریت وبلاگ یا وب سایت خود استفاده کنید.
ما به شما چند پلاگین حق بیمه وردپرس ارائه می دهیم که به شما کمک می کند تا آن را انجام دهید.
1. Divi Builder.
Divi Builder یک طراح صفحه با کیفیت بالا است که بسیار ارزشمند است تم های ظریفاگر چه معمولا به عنوان بخشی از تم وردپرس Divi استفاده می شود، Divi Builder نیز یک پلاگین جداگانه است که می تواند در سایر موضوعات وردپرس استفاده شود.
Divi Builder به شما امکان می دهد محتوای خود را با استفاده از رابط بصری در طرف رابط، و همچنین رابط کاربری در سمت سرور ویرایش کنید، اگرچه اکثر کاربران ترجیح می دهند اولین رابط را ترجیح دهند.
در واقع، به جای پانل های جانبی، همه چیز در پنجره های پاپ آپ و دکمه های شناور است. این به شما امکان دسترسی به قالب های از پیش تعریف شده 316 را فراهم می کند، که در ارائه های مختلف 40 بسته توزیع شده است، و همچنین به شما امکان می دهد طرح های خود را به عنوان قالب ذخیره کنید.
ما پیشنهاد می کنیم باز کنید
یکی از ویژگی های دیوی همیشه بر سبک هایی است که به شما می دهد، کنترل شده است. در سه زبانه مختلف، شما می توانید پارامترهای مختلف، از جمله کنترل های سازگار، فاصله قابل تنظیم و خیلی بیشتر پیکربندی کنید.
شما حتی می توانید یک CSS سفارشی اضافه کنید زیرا ویرایشگر CSS آن را ترکیبی از چک پایه و خودکار پر کردن می کند.یکی از منتقدان Divi Builder همواره این است که بر اساس آن است، به این معنی است که اگر شما آن را یک بار، یک دسته از کد های کوتاه در محتوای شما باقی می ماند. اگر چه این کمی افسرده است، اما در حال حاضر مشکلات کمتر با چنین پلاگین ها به عنوان تمیز کننده کوتاه وجود دارد.
2. سازنده
تعجب آور نیست که Themified Builder پیشنهاد تیم تظاهرات است. او آن را به بسیاری از وردپرس خود ادغام می کند تا مشتریان را با تنظیمات ساده ارائه دهد. اما شما همچنین می توانید آن را به عنوان یک پلاگین جداگانه خریداری کنید و از آن با هر موضوع وردپرس استفاده کنید.
مانند سازنده Divi Builder و WPBakery Builder، Themify Builder به شما امکان می دهد طرح بندی ها را در رابط کاربری یا باطن ایجاد کنید.یکی دیگر از چیزهای خوب - این افزونه به شما اجازه می دهد تا پاسخگو خود را پیکربندی کنید نقاط کنترل (اما تنها در سطح کل سایت).
کشف یک فروشگاه آنلاین ایجاد کنید و به راحتی محصولات خود را در اینترنت به فروش برسانید.
یک ویژگی جالب از Themified Builder این است که هنوز هم به شما اجازه می دهد از ویرایشگر استاندارد WordPress استفاده کنید، در حالی که طراحان صفحه دیگر شما رابط کاربری صفحه ساز را برای همه چیز استفاده می کنند.
3. فکیر
در ابتدا در سال 2016 راه اندازی شد، افزونه Elementor WordPress یکی از جوانترین توسعه دهندگان این لیست است. علیرغم راه اندازی دیر، Elementor به سرعت تنظیمات فعالتر 1،000،000 را در WordPress.org جمع آوری کرد، که آن را یکی از محبوب ترین طراحان وردپرس می کند.
اگر پیشنهادات یا نظرات دارید، آنها را در بخش ما بگذارید