Как установить шаблон WordPress. Инструкция как редактировать шаблон под себя

Привет, друзья. Не получается у меня по прорядку писать, поэтому в ближайшем будущем появиться заметка как установить Вордпресс на хостинг, ну а сегодня я хочу поговорить о том, как установить шаблон на Вордпресс, где его искать и как привести все в прорядок?

Стоит начать с того, что шаблоны для блога стоит выбирать у проверенных сайтов. Если вы плохо разбираетесь в коде, то можете приятно удивиться, когда у вас будет куча скрытых ссылок в футере.

Где искать шаблоны для блога? Лично я доверяю этим сайтам.

  • blogstyle.ru
  • wpbot.ru

Как установить шаблон на вордпресс, как редактировать шаблон под себя

Как установить шаблон WordPress?

Для начало мы должны выбрать подходящий «каркас» для себя. Лично я для своих сайтов выбираю шаблон с двумя колонками. Давайте для примера возьмем тему — WordPress Fun Kids. Простая и удобная.

Для начала нам нужно скачать ее к себе.  Скачиваем с сайта   «Сохранить ссылку как» и указываем нужную папку. Шаблон скачен. Теперь нужно предпринять меры безопасности и сохранить ваш сайт и базу данных, другими словами сделать бэкап.

Теперь можем установить шаблон на Вордпресс.

Пошаговая инструкция как установить шаблон на WordPress

В админке:

  1. внешний вид
  2. темы
  3. установить темы
  4. загрузить
  5. выбирем шаблон
  6. установить

Все, тема загружена. Теперь переходим на сайт и видим этот ужас.

Хороший шаблон с двумя колонками

Да-да нам еще нужно много чего исправить и поменять. Ведь на данный момент сайт не уникален. Таких сайтов тысячи в сети. Да и вообще, дизайн сайта должен соответствовать теме вашего блога и быть индивидуальным. Я не предлагаю заказывать дизайн, а просто своими руками немного подкорректировать, улучшить и изменить.

Поэтому прикидывайте сразу план как будете редактировать и улучшать шаблон.

  • 1. Поменять шапку
  • 2. Поменять фон
  • 3. Поменять цвета, размер колонок и тд

Для начало нужно понять из чего состоит ваша тема. Это относится к любому человеку, если вы завели блог, то вы должны знать эти азы.

Азы из чего состоит шаблон Вордпресс

Что бы было понятнее, я решила этих же границы прорисовать на исходном примере.

Из чего состоит шаблон вордпресс

Визуально мы поделили на участки, теперь посомтрим на код, где он находиться. Постораюсь сразу в двух словах описывпать что и как.

редактировать шаблон под себя

После того, как нажали на редактор, смотрим в правую сторону и видим название файлов:

Файлы из которые состоит обычный шаблон для вордпресса

Инструкция как редактировать шаблон под себя

На самом деле по каждому файлу можно расписать все подробно. Что бы не грузить вас лишней информацией, на данный момент просто расскажу, куда нужно тыкать, что бы немного изменить шаблон под себя.

Составляем на черновике как будет выглядеть наш сайт. Запомните чем проще, тем лучше. Во-первых, если использовать минимум графики, у вас будет простор и воздух, во-вторых вы избежите кучу лишних ляпов. Посмотрите на сайты крутых порталов, обычно у них тока логотип, и нет каких-то картинок нарезанных и тд.


Составляем макет для сайта

Первое что нужно сделать. Это изменить шапку и фон. Шапку рисуем в фотошопе.

Например мы хотим переделать дизайн у мамского сайта. Акцент на шапку не хочу делать. Нашла просто иконку мишки и прилепила его на белый фон. (При нажатии вся раскрывается)

Инструкция как сделать простую шапку для блога

Дальше нам нужно зайти на хотсинг на наш сайт. (Например на бегете это файловый менеджер)

Создаем в корне сайта новую папку img и загружаем туда шапку.

Теперь заходим в админку Внешний вид — > Редактор. Выбирем раздел стилей (style.css)

Нажимаем сочетания клавиш Ctrl+F вводим в углу слово logo

Это слово нашлось в этом куске кода

#container {
 width:1000px;
 margin: 0 auto;
 padding:0;
 background:#fff;
 background-image: url(images/logo.jpg);
 background-position: top right;
 background-repeat: no-repeat;
 }

Что мы делаем? Меням старую картинку на новую. А именно меняем строчку

background-image: url(images/logo.jpg);

на

background-image: url(http://Вашсайт.ru/img/shapka.jpg);

Размер мишки. 900×150. Теперь нам  следует поменять этот размер в шапке

#header {
 width: 1000px;
 height: 160px;
 margin: 0;
}

Следующий шаг — меняем фон. Отправляемся в поиск и ищем «клипарт» . Можно найти много разного вот  на этом сайте http://www.lenagold.ru/fon/main.html

В разделе фоны. Помните, фон не должен быть кричащем типо выколи мне глаз. Вообщем я нашла в разделе Геометрические эскизы-Клетки-Бежевые клетки

Красивый бежевый фон для сайта

Перед этим я сделала его более легким и прозрачным в фотошопе. Теперь повторяем процедуру. Загружаем этот узор в папку img

Теперь в стилях находим этот кусок кода

body {
 background: #dd7f80;
 font-family: Tahoma;
 font-size: 90%;
 margin-top: 10px;
 color: #2b2225;
 background-image: url(images/bg.png);
 background-repeat: repeat;
 background-position: center;
}

Меняем строчку

background-image: url(images/bg.png);

на

background-image: url (http://www.incanta.ru/img/kletkafon.jpg);

Вот что у нас получлиось:

Инструкция как редактировать шаблон

Сразу почеркала, что нам нужно изменить и куда что перенести.

  • Перенести название блога левее.
  • Перенести меню в левый угол
  • Поменять цвет ссылок на бежевый
  • Изменить розовый фон под рубриками на что-то другое
  • Убрать ссылку в футере
  • Изменить цвет поиска

Уф, поехали по порядку.

Женский блог это #header h1

#header h1{
 font: normal 34pt georgia, times;
 line-height: 45px;
 padding: 40px 0 0 30px;
 margin: 0px;
 width: 350px;
}

поменяла на

#header h1{
 font: normal 18pt georgia, times;
 line-height: 25px;
 padding: 20px 0 0 30px;
 padding-left: 23%;
 margin: 0px;
 width: 550px;
}

Что было сделано? Уменьшила размер шрифта с 34 до 18. Подвинула в лево на 23процента, и подняла немного на верх.

Поменяла цвета ссылок вот тут

#header h1 a{color: #b8860b; text-decoration: none;}
#header h1 a:hover{color: #d2b48c; text-decoration: none;}

Первая строка цвет ссылки, вторая строка цвет ссылки при наведении.

Затем поменяла цвета ссылок меню. Обычный и при выделении

#menu ul li a {
 padding: 8px 10px;
 margin: 0;
 color: #d2b48c;
 display: block;
}

 

#menu ul li a:hover {
 color: #fff;
 text-decoration: none;
 background: #b9dcf0;
 height: 35px;
}

Дальше я передвинула меню в левую сторону padding-left: 75%;

#menu {
 text-align: right;
 height: 30px;
 width: 350px;
 overflow: hidden;
 float: left;
 margin: 0px;
 padding-top: 15px;
 padding-left: 75%;
}

Так, вот что у нас уже получилось(картинка как всегда увеличивается при клике)
Инструкция как поменять дизайн для женского сайта
О, мне уже начинает нравиться, что у нас будет получаться) Осталось немного.

Теперь меняем цвета ссылок. Ctrl+F и ищем слово links — ссылки

/* links */

a{
color: #fc585f;    (Просто цвет ссылок)
text-decoration: none;
}

a:hover{text-decoration: none; color:#7ab8d1;}   (Цвет ссылок при наведени)

Мы должны сохранить цветовую гамму сайта (бело-песочную). Меняем цвета на такие же как и в шапке

#b8860b; и #d2b48c;
Следующий пункт - меняем розовый фон под категориями. Этот участок относиться к postmetadata. Через поиск находим этот кусок кода.

.postmetadata{
clear: both;
background: #f8d9d3;
padding:6px;
margin: 20px 0;
font-size: 11px;
color: #777;
}

Просто удалим строчку background: #f8d9d3;

Далее ищем слово footer

#footer {
clear: both;
width: 970px;
margin: 10px auto;
border-top: 1px solid #b9dcf0;
height: 30px;

В этом кусочке кода нужно поменять цвет ссылки с синей на бежевую и давайте сделаем ее пунктирной. Заменим на border-top: 1px dashed #faeedd;

Осталось совсем немного. Заходим в footer.php

И меняем кусочек кода на это


Перепечатка материалов запрещена © <!--?php echo date("Y"); ?--> <!--?php if ( (is_home())&&!(is_paged()) ){ ?-->Самый <a title="Все для мам и будущих мам" href="http://www.incanta.ru">женский блог</a>.<!--?php }else{ ?--> <!--?php } ?-->

Соответственно подставляете свой сайт и свое описание.

Последнее — меняем цвет поиска. Находим слово searchform

#searchform input#s{
margin:0;
border:1px solid #d2b48c;
padding:2px;
color: #d2b48c;
text-align: left;
background: #fff;
font: normal 9pt tahoma, verdana;
}

Меняем border:1px solid #d2b48c; и  color: #d2b48c;   на #d2b48c;

Все. Вот что у нас получилось

Как быстро поменять дизайн сайта

Светлый, аккуратный, в каком-то смысле уникальный. Да, нет никакого мега дизайна, но такой вариант может сделать каждый.

Теперь хочу поговорить о инструментах, которыми я пользуюсь

1. Браузер Google Crome.  Нам нужно посмотреть что за код в шаблоне. Нажимаем сочетание клавиш Ctrl+Shift+I

Инструмента для редактирования шаблона

Выскочила табличка, нажимаем на «лупу» наводим на интересующий нас элемент, и справа видим, что это например header h2 и если нам нужно поменять цвет или шрифт, то захоим в редактор — стили и ctrl+F  header h2. Вот и все.

2. Яндекс цвета. Вводим я яндекс эту ключевое слов и перед нами барабанчик с разными цветами. Соответственно  я там и подбираю цвета для сайта.

3. Если что не понятно, что значит какое-то слов в коде, берем и вбиваем ее в поисковик. Обычно это приводит нас на сайт http://htmlbook.ru где все понятно расписано, что да как.

P.S над шаблоном конечно еще нужно поработать или возможно через время попросить знающего человека, что бы он сделала оптимизацию кода. Или по тихоньку заняться самой. Вообщем я думаю будут и такие посты.

Фуф, вымучила пост, надеюсь будет полезен. Ваша Инканта.

Как установить красивые кнопки социальных сетей

Похожие статьи

Отзывов (43) на «Как установить шаблон WordPress. Инструкция как редактировать шаблон под себя»

  1. Для того чтобы убрать левые ссылки из шаблона достаточно использовать плагин TAC.

  2. Инканта, спасибо огромное. Как раз то, что нужно! =) Собираюсь делать женский сайт. Для меня, пожалуй, самое сложное — шаблон. Но давно хотела сама научиться его по нормальному править. Спасибо за отличную инструкцию!

  3. Leo:

    Полезная инфа, для начинающих юзеров самый раз!

    Только вот сам тоже не понял, в стилях вот такое можно писать:

    height: 160px;

    т.е. теги , я лично никогда не видел такого %)

    Кстати, на моем продвигаемом сайте произошли небольшие изменения — он практически выпал из индекса Яши. Я допустил оплошность — сам того не подозревая запретил его индексацию в роботс-е. Это было примерно 3 недели назад, точнее исправил ляп 3 недели назад, на данный момент в индексе Яндекса всего лишь 5 страниц, пока остальные страницы ну никак не хотят индексироваться, опасаюсь фильтра какого-нибудь. На серче сказали, что все нормально, пока говорит рано дергаться, подождать надо... В Гугле все хорошо, в основном индексе страниц в районе 60%, тут все быстренько восстановилось, да и трафик начал с него идти потихоньку, человек 20-30, раньше было совсем по нулям.

  4. Leo:

    мблин, что-то не то...

    насчет стилей смотри в своем посте второй по счету код, где у тебя идентификатор хедер идет, там у тебя тег «стронг» почему-то... ты правильно написала?

    • Жирным выделила для видимости, типо: было и стало. А потом решила в код сделать, видимо не везде удалила «стронг».

    • Ну ничего, нужно ждать. И работать на контентом. У меня ничего интересного по жен.сайту нет.

  5. r00t:

    Leo, если вы уже исправили robots, то Яша скоро все обратно подхватит

  6. видимо с ворда копи пастнула )))) исправит

  7. Инканта, а что сейчас делаете со своим женским сайтом?

    • Ничего :( Топчусь на посещалки 230-270 уников. Цель до конца марта—500 чел сутки. И в конца марта отчет за весь март вот).

      • Я сегодня женский открываю, интересно с этим направлением поработать. Буду изучать твои статьи =)

        • О, тогда сразу совет.

          Лучше не общий женский, а бери узкую нишу. И тащи качеством. Можно и с 30-40 страницами выйти на посещалку 1000+ .

          Отписывайся как будут результаты.

          И ребят :-[ Маленькая просьба. Давайте эту тему обсуждать в разделе «В прямом эфире».

          Все же на эту будут идти с поисковиков и узнать как редактировать шаблон под себя и будут удивлены обсуждениями разных сайтов)))

          • Спасибо за совет! Как раз начинаю редактировать шаблон под себя. И конечно, это опять мой любимый WordPress :-[

  8. Leo:

    Да, сегодня появилось 39 новых страниц в индексе Яши, я так рад! :P так, будто несколько кило трафика пришло!

    Маринка, ты sitemap как делаешь — с помощью плагина или стороннего сервиса?

  9. Leo:

    Ага, попробуем и так, может еще сдвиги будут. Да и подумываю аналитикс поставить. Спасибо за наводку!

  10. Хороший мануал, сама тоже всегда дорабатываю шаблоны под себя. Про Яндекс.цвета спасибо, не знала, что есть такое, буду пользоваться.

    И маааленькое замечание: «сайДбар» правильнее говорить и писать, а не «сайТбар» ) Изначально эт ж от английского sidebar — т.е. «боковая панель»))

  11. с моим шаблоном без спеца не обойтись, видимо...Жаль, что не видела этого урока когда только настраивала блог, выбирала шаблон... сейчас пока нет ни сил, ни времени снова переделывать с нуля. Но изложено понятно, даже мне )

    • По себе знаю, что трудно взяться за что-то новое, но не обязательно все в один день переделывать. Сегодня можно поменять какой-то цвет, через пару дней еще что-то)

  12. Анна:

    Только-только начинаю осваивать азы блоговедения, и пока что для меня все — темный лес. Читая ваш блог, снимаю шляпу, мне еще учиться и учиться. А с шаблоном вообще маета одна, слишком кажется все сложно.

    • Это первое время так кажется, главное инфу большими дозами не употреблять, а то каша выйдет :-D

      Рада, что мои заметки оказались полезными. Кстати, с этим шаблончиком нужно еще повозиться, так что будет и вторая часть.

  13. Вы можете определить вредоносный код на сайте? У меня 1 проект в нокауте. А человек так до телился с поиском, что Яндекс уже вывеску поцепил, что вирус на сайте. Я уже и шаблон сменила. правда, но все же нужна нормальная консультация...

  14. О...Спасибки! Классный сайт! Кстати есть плагин AntiVirus. Я себе установила,но он похоже указывает на подозрения,удалять в ручную наверно нужно.

  15. Екатерина:

    =) добрый день, спасибо за полезную статью, нашла для себя шаблон с тремя колонками, но мне на сайте не нужен календарик и прочая дребедень вроде облака меток и так далее, я хочу, чтобы в этих колонках была моя информация, например, как на сайте Далай-ламы, у него там всё по теме как говорится. Это реально? Большое спасибо.

    dalailama.ru

  16. Екатерина:

    а еще я такие же смайлики на сайт хочу очень сильно, это мои любимые. вы скажете, где их взять *ROSE*

    P.S. Мой сайт в разработке, но уже хочется, чтобы он был грамотно оформлен

  17. Забавный спамм-реклам-комент, оставлю на память :-D

    Виджет-текст вам в помощь.

  18. Екатерина:

    не, я правда не спам, так и знала что вы меня за спам посчитаете, надо было не приводить в пример тот сайт =)

    • На сайте Ламы... Тока 1 текстовый виджет — «Добро пожаловать», остальные просто рубрики так выводятся.

      Форум не пробовала, но есть далекие планы по созданию. Всмысле урок? Записать на видео?

      • Екатерина:

        А, спасибо =) можно было бы просто описание с примерами, как в этой статье, очень понятно *THUMBS UP*

  19. Екатерина:

    И еще — вы не пробовали делать форум? =) на мой взгляд форум интереснее, чем длинная ветка комментов, и не плохо бы урок на эту тему :-[ как установить и т.д...

  20. Екатерина:

    Инканта, пытаюсь запустить сайт с темой oriental, не могу понять, почему она не идет у меня *TIRED* уже замучалась, а другую тему подобрать не получается

    • Если вы скачивали с блога blogstyle.ru, то там есть форум на котором можно задать вопрос и автор переводила этот шаблон и точно сможет вам помочь.

      А как понять не идет? Не грузиться или пишет какую-то ошибку?

  21. Екатерина:

    Шаблон загрузила на сайт, но даже в предварительном просмотре отображается только шапка и общий фон, а остального словно и не было никогда. Если этот шаблон активировать, то сайт накрывается, высвечивается ошибка, да. 503 вроде бы bad gateway кажется, а мне нужен этот шаблон

    • Возможно возник конфликт с плагинами. Попробуйте все отключить.

      Если не получается, то дело в самом шаблоне. И тут уже лучше обратиться к профессионалу.

      Могу порекомендовать Татьяну (в этом посте есть ссылка на ее блог с услугами) www.incanta.ru/novyj-diza...nta-chast-2.html

  22. Екатерина:

    Спасибо вам большое :-* не стала париться, поставила тему Sight и настраиваю ее. Сейчас хочу изменить фон, как вы показывали, мучаюсь, ищу бамбуки на оранжевом фоне, да и вообще ищу легкие фоны, которые можно скачать по человечески...

  23. Maik:

    Здравствуй,Инканта.Как у вас с посещаемостью,добились своих результатов?если не секрет.

  24. Lina:

    Спасибо! Благодаря вашим советам научилась редактировать шаблон!

Ваш отзыв