Рейтинг@Mail.ru
Евгений Попов раскрывает Все технические моменты онлайн-бизнеса в видеоформате 2011.
02.12.2011 – 03:08 | Нет комментариев

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

Читать запись полностью »
Бесплатное

курсы ,тренинги ,уроки ,советы новичкам

SEO

Поисковая оптимизация , раскрутка и продвижение

О разном

Прикольное , любопытное , интересное , полезное.

Сервисы

Онлайн инструменты. Веб сервисы

Wordpress

Полезные плагины, хаки, советы

Главная » Wordpress

Простой способ изменить фон background в WordPress

Опубликовал в 09.02.2012 – 00:22комментария 24

замена фона в WordPress теме

Приветствую вас , друзья.

  Сегодня хочу с вами поделиться одной полезной фишкой в WordPress – замена стандартного фона (background) в установленной теме блога.

Как известно поисковые системы не очень приветствуют бесплатные темы, которых полно в интернете. Желательно , после установки темы на WordPress, хоть немного изменить ее дизайн, поменять цвета, шрифты, расположение элементов и т.д.

Новички обычно боятся это делать (по себе знаю) , что бы ничего не сломать 🙂 , хотя есть острое желание что нибудь поменять.

В этой статье я описываю относительно простой и безопасный способ замены стандартного фона в теме блога.

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

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

Эта фишка работает для WordPress начиная с версии 3.0 и до версии 3.4.

Если у вас установлен WordPress 3.0 – 3.3 , то вы можете активировать эту функцию. После чего в админке появится новая опция «ФОН» , в которой можно легко менять задний фон (backgroung) вашего блога .

Возможности

  • Предпросмотр фона
  • Изменять цвета заливки
  • устанавливать любые картинки в качестве фона
  • Выравнивание (слева,по центру, справа.)
  • Повтор (замостить, замостить по горизонтали или по вертикали, не повторять)
  • Привязка (прокручивать, зафиксировать фон)

Активировав однажды эту функцию вам не нужно будет ковыряться в служебных файлах темы , каждый раз когда захотите поменять background блога.

 

Перед тем как начать

Прошу прощения за банальность, но все таки повторю прописную истину.

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

Не все темы (особенно древние) корректно воспринимают вмешательство в служебные файлы.  На всякий случай, сделайте хотябы свежую копию файлов   темы  functions.php, style.css.

Если после внесенных изменений результат окажется не таким как ожидалось 🙁 ,  нужно будет только либо удалить добавленные строки кода из файла , либо целиком востановить измененный файл (для этого нужен доступ к файлам сайта по FTP, или из админ панели хостинга ).

Процедура активации

1.    Заходим в админку блога

2.    Далее переходим в раздел «Внешний вид» – «редактор»

3.    Для редактирования выбираем файл темы  functions.php.

4.    Копируем в буфер обмена строку  (для WordPress версии от 3.0 до 3.3)

1
add_custom_background();

Добавлено 10.2012
Начиная с версии 3.4 изменился PHP код активирующий “ФОН” в админке. Старый код перестал работать !  Новый код выглядит так:
1
add_theme_support( 'custom-background' );

Подробнее об активации  в админке разделов “фон” и “заголовок сайта”  в Wordpress 3.4 можно почитать здесь (Англ.).

6.     Вставляем ее в пустой строке перед символом «//» – это начало следующей функции.(Со знака «//» начинается комментарий к этой функции. Кстати советую добавить и к этой строке свой коментарий.)

PIC_10

7.    Нажимаем ниже кнопку «Обновить файл».

Все готово. Функция «Фон» активирована и будет применена в установленной теме.

8.    Выходим из админки.

При следующем заходе в панель администратора в разделе «Внешний вид» появится опция «Фон».

PIC_11

Как пользоваться

Кто хоть раз менял обои на рабочем столе Windows , сразу все поймет взглянув на эту картинку.

PIC_37.png

  1. Нажимаем кнопку «Browse»Выбираем картинку у себя на компьютере.
  2. Нажимаем кнопку «Загрузка»
  3. Настраиваем желаемое отображение
  4. Смотрим в окне предпросмотра на результат.
  5. Если то ,что вы видите, вам нравиться, нажимаете кнопку внизу «сохранить изменения» и любуетесь новым фоном на блоге. Можно открыть свой блог в другой вкладке , или окне броузера.
  6. Если НЕ нравиться , возвращаемся к пункту 1.

Замена фона занимает не более минуты.

Теперь вы можете легко менять background хоть каждый день. Например в зависимости от настроения, или погоды, или времени года, или дня недели 🙂 . Пусть ваш блог будет нарядным и стильным.

Добавлено 10.2012

После обновления WordPress до 3.4 и 3.4.2 фон перестал отображаться на сайте, хотя в админке раздел “ФОН” активен. Пробовал на 3-х блогах, результат везде одинаков. При просмотре HTML кода страницы блок отвечающий за отображение бэкграунда присутствует, но , почему то, не отрабатывает. Для восстановления фона на сайте я просто вырезал этот “не работающий” кусок HTML кода, немного подредактировал и вставил его в файл style.css в раздел body. Фон стал отображаться, что и требовалось. Это конечно не так удобно и безопасно, как менять фон из админки, но это работает.

Фрагмент измененного файла style.css

1
2
3
4
5
6
7
8
body {
font: 100% Arial, Helvetica;
background: #C3C3C3;
background-image: url('http://infodrug.ru/wp-content/themes/thema-prema/images/carbon.png');
background-repeat: repeat;
background-position: top left;
background-attachment: fixed;
}

Теперь можно и удалить, или закомментировать строку из файла functions.php , поскольку код генерируемый благоаря ее наличию присутствует в коде страницы, а лишний код нам не нужен :).

Буду благодарен всем , кто откликнется в комментариях, описав свою версию WordPress и метод управления бэкграундом (ф0ном) сайта. Это поможет разобраться в чем проблема в новом WordPress, или в самой теме.


Читайте также:


комментария 24 »

  • Василий:

    Спасибо “друг”…. С твоей помощью полностью снёс нахер сайт… Удружил……

    • InfoDrug InfoDrug:

      Здравствуйте Василий. Я сожалею о том что Ваш сайт пострадал 🙁 . Извините , что не сразу ответил на Ваш эмоциональный комментарий. Хотелось ответить по делу.
      Мне жаль , что Вы считаете меня “помощьником” в гибели Вашего сайта, о котором я даже ничего не знаю.

      Информация описанная в этой статье придумана не мной, а взята с сайта документации по WordPress – codex.wordpress.org , успешно опробована “на себе”, на нескольких блогах и только после этого опубликована. В статье описана стандартная функция, а не какой то непроверенный хак WordPress.

      ❗ Описанное в статье актуально для WordPress начиная с вер.3.0 до вер.3.3.*.
      ❗ Начиная с версии 3.4 изменилась функция активирующая раздел “Фон” в админке.

      Метод описанный в статье для WordPress 3.4.* просто не работает, ничего при этом не вредя. Для примера, после обновления WordPress с 3.1 до вер.3.4.2 на этом блоге исчезла фоновая картинка, но блог “выжил”. Подробнее на эту тему здесь.

      Поэтому я могу с уверенностью сказать , что проблема не в “моей помощи”, а скорее всего в чем то другом.

      Думаю мой блог просто не вовремя подвернулся Вам под “горячую руку” 👿 .

      Василий, если вы готовы принять мою помощь, я готов помочь разобраться в проблеме с Вашим сайтом, что бы убрать “неприятный осадок” ;).

      • Василий:

        Я прошу прощения за свои эмоции. Сайт действительно полностью “слетел” и прекратил своё существование. Бэкап не помог, поэтому пришлось всё заново устанавливать. И так как я новичок в сайтостроении, это для меня составило некие трудности. У меня действительно версия 3.4.2. может из-за этого? Хотя Вы пишете, что повредиться не должен был. Сейчас сайт восстановливаю, правда не в таком виде как был, о чем конечно сожалею, но буду стараться вернуть его в прежнее состояние, а там уж как получится. Еще раз, прошу меня извинить за мою излишнюю эмоциональность.
        С уважением, Василий.
        http://ya-konfetka.ru/

        • InfoDrug InfoDrug:

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

          • Василий:

            Спасибо Анатолий за положительный отзыв о сайте. Был значительно лучше. Да я то что… Жена расстроилась, я ведь только с технической стороны, а она всё остальное. Сайт расположен на sprinthost.ru и бекап делается из админ панели, после установки плагина WordPress Importer. Но, к сожалению сохранение происходит не всего сайта, а только его текстовой части. Все картинки и установки пропадают. И при восстановлении бы видим лишь только текст. Поэтому мне он и не помог.
            Сейчас вот пытаюсь установить форум с помощью плагина Mingle Forum и установить плагин IGIT Related Post With Thumb. Вернее оба установил, но первый не показывает форум, втавляю шорткод на страницу (можно посмотреть, страница 5), а он так и пишется, а второй не сохраняет мои настройки. Наверно я что то не так делаю.

  • perevod:

    Что за инструкция, автор снеси и не накликай на себя беду. После внесения строки и обновления записи слетел сайт. Если я сейчас не восстановлю его с бекапа (который забыл сделать кстати заранее) я тебе этого не прощу.
    И как твоц сайт попав в выдачу гугле на первую страницу диву даюсь. Надо же так повелся я

    • InfoDrug InfoDrug:

      На суд читателей.
      Публикую данный “альтернативный” взгляд на статью в “первозданном” 🙂 виде с одной единственной целью, напомнить о такой банальной вещи как БЭКАП.

      ❗ Перед внесением каких либо изменений в системные файлы сайта убедитесь, что у вас есть актуальный БЭКАП, на всякий случай!”.Если кто не знает что такое бэкап,напомню, это резервная копия файлов темы и базы данных сайта, которая позволит восстановить работоспособность сайта, если что-то пойдет не так . Это первое чему следует научиться начинающему сайтостроителю (до того как он научиться вносить изменения в служебные файлы 😉 ).

      P.S. Нужно будет подкинуть идею авторам кулинарных сайтов, что бы в каждом рецепте был призыв “Мойте руки перед едой!”. Что бы не получать потом комменты, типа “Я приготовил блюдо по вашему рецепту и у меня разболелся живот, если он не перестанет болеть , то я вам этого не прощу” 🙂

  • perevod:

    Сделал после “слета сайта” все назад, тебе повезло 😉
    Советую дописать для новичков что и как делать в случае моем и Василия:
    Заходим на хостинг через ftp клиент , находим файл с темой по адресу wp-content/themes/(имя вашей темы)/functions.php
    и через редактор удаляем строку “add_theme_support( ‘custom-background’ );”
    сохраняем и любуемся сайтом дальше.

    p.s. больit не эксперементируем ))

    • InfoDrug InfoDrug:

      Perevod, благодарю за совет и описание личного опыта. Кому нибудь из читателей может пригодиться. Дополню статью , раз уж мне так повезло 😉

  • Оля:

    Подскажите, пожалуйста, что я делаю не так. Я прописывала строки

    background-image: url(‘ссылка на картинку’);
    background-attachment: fixed;

    в stile.css вручную, потому что у меня они отсутствуют. Место вставки обвела на скриншоте
    http://s56.radikal.ru/i154/1211/f6/61f3b2cec913.jpg
    Но у меня ничего не отобразилось. Я очистила кэш браузера на всякий случай – всё равно. Поскольку я читала на эту тему и другой материал (а в нём есть некоторые отличия), то пробовала вносить правки: убирала пробел между двоеточием и следующим словом; убирала слово image, оставив background; убирала/ставила кавычки на ссылке к файлу; убирала/добавляла строчку про position и repeat. Но у меня таки ничего не отображается.

    • InfoDrug InfoDrug:

      Хороше бы взглянуть на ваш сайт, Оля. 🙂 Вы все делаете правильно, НО. Судя по коду на картинке на вашем сайте фон залит градиентом. Вот он , скорее всего и накрывает бекграунд-картинку. Если вы хотите вместо градиентной заливки установить свой фон, то строки body.gradient…. ,будут лишними и будут мешать.
      Попробуйте , для начала, в строке background-image добавить параметр !important прямо перед “;”. Примерно так:
      background-image: url('.......') !important ;
      Это параметр, который повысит приоритет отображения бекграунд-картинки над градиентом при прорисовке стилей. В результате должен показаться ваш добавленный фон.
      Если это не поможет, напишите адрес своего сайта. Я постараюсь помочь.

      • Оля:

        Огромное спасибо, теперь всё получилось. Про градиент – да, Вы правы, там зелёная заливка на фоне. Кстати говоря, из-за неё теперь новая проблема, о которой я не подумала: вы знаете как сделать чтобы этот градиент остался для части, где собственно, размещается сам контент? Т.е. выделить всё что написано под заголовком единой цветовой полосой.
        До:
        http://s019.radikal.ru/i635/1211/eb/5806e175a71b.jpg

        После:
        http://s017.radikal.ru/i424/1211/cb/6093b64a9619.jpg
        http://s019.radikal.ru/i634/1211/93/4d927749b6fa.jpg

        • InfoDrug InfoDrug:

          Нужно добавить градиентный фон в разделе page файла style.css.

          • Оля:

            Я извиняюсь, это вот в этом куске:

            .pageContainer {
            text-align:left;
            width:980px;
            margin:0 auto;
            position:relative;
            z-index:1;
            }

            ?

            А как конкретно прописывается этот фон?

          • InfoDrug InfoDrug:

            Трудно сказать наверняка, не видя сайта. Но судя по названию класса “.pageContainer” – это то что вам нужно.
            Добавте стороку background: #296F6F ; Вместо 296F6F можно подставить другой цвет.
            Если этого окажется не достаточно для отображения цветной заливки на странице, попробуйте увеличить значение параметра z-index:,
            z-index – это как номер слоя в фотошопе.

  • Оля:

    Ещё раз большое спасибо, всё получилось. А степень прозрачности этого градиента регулируется где-нибудь?

    • InfoDrug InfoDrug:

      Прозрачность регулируется параметром opacity , если мне не изменяет склероз :). Вроде так:
      opacity: .5; /* полупрозрачный */
      filter:alpha(opacity=50); /* полупрозрачность для IE*/
      Лучше уточните на каком нибудь специализированном сайте. Она вроде не во всех браузерах корректно работает.

      • Оля:

        Благодарю! Пока не знаю как для IE, но для Firefox и Opera сработало следующее (в pageContainer):
        opacity: 0.9;
        filter:alpha(opacity=90);
        zoom:1;

        Правда картинки/фото внутри новостной полосы тоже стали прозрачными, всё как снежный ком)) Охохо

  • Спасибо за подсказки в коментах без них не разобрался бы.
    Получилось только вручную в Stal.css прописать так как не взирая на движок 3.2.1 у меня в functions.php уже было прописанно add_theme_support( ‘custom-background’ ); и от этого не появлялась менюшк фона возможно нужно было прописать старый вариант?
    Но вопрос не в этом хотел спросить что прописать чтобы привязка картинки бэкграунда была к центру экрана, а не к левому верхнему углу???
    Ато я сделал картинку 1500 по горизонтали и не больших мониторах она не коректно тайлиться как с этим бороться??

  • ООо спасибо, долго мучился с фоном на одном из сайтом, а теперь все как нужно)

  • Здравствуйте!У меня такой вопрос,как фоновое изображение,сделать ссылкой,ну типа рекламой,вы я думаю видели такие сайты.Я вот сколько не копаюсь не могу найти решение.Мой сайт Tutraznoe.ru,он тестовый,я на нем только практикуюсь.На этом сайте вы увидите фон,его та и надо сделать ссылкой.В javascripte,php я ниочем)Спасибо заранее!

    • InfoDrug InfoDrug:

      Первый же поисковый запрос показал решение требуемой задачи. Решаемо с помощью CSS. Задайте в google поиск по фразе “background hyperlink css”.

  • Спасибо! В теме изменение фона не было предусмотрено, а “свой” фон был ужасным, строчку, в которой он был прописан удалила. Теперь искала варианты как установить фон на вордпресс. Ваша инструкция работает!!! Теперь, даже не имея специальных навыков, могу без проблем “вытворять” с фоном все что захочу: размещать по центру, фиксировать, замостить… Спасибо огромное!

  • Заголовк являются еще одной областью, где вы можете добавить элементы навигации на ваш сайт. Как правило, эти горизонтальные меню в верхней или нижней части заголовка. Чтобы добавить эти, создайте новый блок в заголовоке – блок навигации, и примените стиль к этому блок.

Оставьте комментарий

Добавьте комментарий ниже или обратную ссылку со своего сайта. Вы можете также подписаться на эти комментарии по RSS.

Вы можете использовать коды HTML:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

На сайте используются Gravatar. Чтобы его получить зарегистрируйтесь Gravatar.

Subscribe without commenting