Приветствую Вас на сайте wp.infohub.su .Сегодня я хочу рассказать Вам мои дорогие читатели как своими руками можно изменить ширину шаблона wordpress. Очень часто возникает проблема при выборе шаблонов wordpress – это узкая ширина блоков шаблона, и у многих людей сразу же возникает желание увеличить ширину шаблона.В данном уроке я хочу продемонстрировать что ничего сложного в этой идее нет, и ознакомившись со статьей Вы сможете применить новые знания на практике и самостоятельно расширить шаблон wordpress.
Итак, поехали.Нам понадобится:
- Браузер Google Chrome или Firefox Mozilla.
- Любой текстовый редактор, но я предпочитаю Notepad2.
- Любой ftp клиент.Я предпочитаю Filezilla и уже писал статью как пользоваться FTP клиентом Filezilla.
Как изменить ширину шаблона wordpress?
Друзья, я не буду останавливаться на вопросе установки программного обеспечения,которое я написал выше, думаю если что то не получится в установке программ ответ можно найти в Google.Предлагаю сразу перейти к делу.
Для примера я выбрал шаблон под названием Green Grapes.Этот шаблон имеет такую же структуру как и большинство стандартных шаблонов wordpress, а значит если Вы поймете как поменять ширину шаблона в этом уроке, то и для остальных думаю не будет возникать никаких трудностей.
Итак первым делом необходимо узнать текущую ширину каркаса шаблона, для этого в Google Chrome на шапке сайта нажимаем правой кнопкой мыши и выбираем пункт “Просмотр кода элемента”
Для начала давайте вспомним из чего состоит шаблон. В статье знакомство с разметкой шаблона wordpress я писал что шаблон состоит из множества блоков вложенных друг в друга.Самый общий блок как правило носит название wrapper , а в его состав входят блоки шапка сайта(header), основная часть (bg) , и футер сайта (footer).Так вот для того что бы увеличить ширину шаблона wordpress, нам последовательно нужно увеличить ширину для каждого блока,что мы сейчас и сделаем.
Итак после выбора пункта “Просмотр кода элемента” в нижней части браузера Google Chrome появляется панель в которой виден HTML код странички, и CSS свойства элементов.Нажимаем мышкой на самый главный блок под названием wrapper, на экране он подсвечивается синим цветом,и в верхнем левом углу появляются размеры блока.Также размеры можно посмотреть в CSS в правом нижнем углу –> width:830px. Как понятно ширина этого шаблона равна 830 пикселям, сейчас мы ее изменим, и новая ширина шаблона будет составлять 1100 пикселей.
Итак, после того как мы узнали ширину самого главного блока, нам необходимо изменить значение ширины блока с 830 на 1100.Для этого левой кнопкой мыши нажимаем на значении 830 и вписываем туда новое значение 1100:
Как видно на рисунке, новый размер блока стал равен 1100 пикселей, и еще одна особенность поиск сдвинулся вправо, не стоит пугаться, на этом этапе так и должно быть.
После того как изменили ширину главного блока,я Вам предлагаю записать себе куда нибудь,что именно и на что изменили и в какой строке.Это необходимо для того что бы в последующем внести изменения в файл стилей.Не забывайте что сейчас мы работаем в визуальном редакторе, и те изменения что Вы сейчас вносите не сохраняются на сервере.
Можете первую запись сделать примерно так.
В самом конце урока все что мы записали, нам действительно нужно будет изменить в файле style.css Ну думаю суть понятна, двигаемся дальше.
Теперь по точно такому же принципу последовательно меняем значения width для блоков header,bg,footer и записываем что и в какой строке поменяли.
После изменения ширины блоков у нас с Вами такова картина:
Как видно на рисунке вправо съехали поиск, и боковое меню, а header вроде так и остался как и был, но это не так.Вся проблема в том, что картинка для этого сайта заточена под ширину 830 пикселей.И все что необходимо сделать это нарисовать или расширить существующую картинку в графическом редакторе, с шириной в 1100 пикселей. Как изменить картинку в шапке сайта я уже писал, и повторяться не буду.Для наглядности что мы все делаем верно предлагаю заменить картинку на фоновый цвет.
Для этого нажимаем на блок header и в левой колонке в свойствах background изменяем значение с url(images/header.jpg) no-repeat на #4E83F3 и вместо картинки у нас появляется синий цвет.
Теперь точно также поступим с фоном сайта.В этом шаблоне фоновый рисунок имеет размер 830 пикселей в ширину и 1 пиксель в высоту.Есть два выхода из ситуации.
1)Увеличить фоновый рисунок до размеров 1100 писелей.
2)Установить фон сайта белым.
В данном случае я выберу 2 “выход”, ну а Вы можете сами выбрать как делать.
Итак нажимаем на блок bg и меняем значение background с url(images/bg.gif) repeat-y на white:
Не забудьте записывать все изменения что Вы проделали.Давайте теперь посмотрим что у нас получилось:
Как видим ширина шаблона увеличилась.Но есть одно но.Ширина блока с текстом осталась такая же как и прежде.Последний штрих – увеличиваем ширину колонки шаблона.
Нажимаем на стрелочку возле блока bg, и у нас появляется еще два блока main и mainnav.Как Вы уже догадались первый блок это центральная часть шаблона,в которой выводятся статьи а второй это сайдбар (боковое меню).
Нажимаем на блок main и изменяем ширину блока width c 510 на 810.И смотрим что получилось:
Ну вроде все отлично.Теперь время подошло к самому главному.
Изменяем ширину шаблона wordpress на сервере.
Итак все что нам осталось это внести изменения в файл style.css
Подключаемся по ftp к хостингу и находим файл style.css он как правило лежит в папке wp-content/themes/название вашего шаблона/styles.css скачиваем его к себе на компьютер, открываем и последовательно вносим изменения те которые мы записывали на протяжении всего урока,после чего сохраняем этот файл, и загружаем обратно на хостинг.И проверяем результат.
Для того что бы занимать первые места в поисковых системах необходимо грамотно оптимизировать сайт. SEO-оптимизация движка WordPress позволит Вам существенно поднять позиции сайта в поисковых системах Google и Yandex.
Голосование.
Получили ли Вы ответ на Ваш вопрос в этой статье?