Блог Евгения Вергуса
Советы Вебмастера
Хотите начать зарабатывать на партнерских программах прямо сейчас?

Как сделать отступ от картинок в WordPress

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

wordpress

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

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

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

2014-11-30

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

Теперь наша картинка выглядит более прилично.

2014-11-30_1

Теперь давайте разберемся, как это сделать. На самом деле нет ничего сложного. Достаточно вставить вот этот style="border: 7px solid white; margin: 7px;" небольшой код в нужное место. Для этого идем в редактор нашей статьи, далее нажимаем на кнопку «Текст» и находим в коде нашу картинку. Сделать это не сложно. Код вставляем сразу после номера картинки и перед тегом src="

Все подробно показал на скриншоте ниже:

2014-11-30_193311

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

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

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

С уважением, Евгений Вергус.

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Оценок статьи ещё нет. Будьте первыми!)
Загрузка...

Спасибо Вам за то, что поделились статьей в социальных сетях!
Подпишитесь на RSS-рассылку и будьте в курсе всех новых статей
К данной статье оставлено: 82 коммент.
  1. Сергей

    Спасибо, Евгений. Все очень понятно и оказывается совсем не сложно! Хочется думать, что разработчики новой версии что-то не доделали и уже в следующей редакции таких «косяков» с отступами не будет (вернут все на место)...

    • Евгений Вергус
      Ответить
      1 декабря 2014 в 10:44

      Не думаю, уже вышло много редакций, но данной функции так и нет.

      • Лариса
        Ответить
        1 декабря 2014 в 13:07

        Да, очень неудобно. Можно, конечно, и ручками код вставлять, но раньше было лучше...

        • Евгений Вергус
          Ответить
          1 декабря 2014 в 14:18

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

          Можно еще стиль прописать и его указывать в настройках картинки.

        • Надежда Суптеля
          Ответить
          11 февраля 2015 в 15:46

          Я тоже Женя сейчас все картинки по центру размещаю, мне так нравится и еще где — то не помню, читала, что по центру бОльший эффект. Пока не разобралась — чего эффект.

        • Евгений Вергус
          Ответить
          11 февраля 2015 в 20:46

          По поводу эффекта не могу сказать, не думаю что от того что картинка по центру будет больший эффект 🙂

  2. Иван

    Может быть тогда не стоит обновлять вордпресс до версии 3.9, что-то я передумал это делать. Зачем если ни чего лучшего, а только хуже, разве не должно быть наоборот? Что то я совсем не понимаю для чего это сделано!

    • Евгений Вергус
      Ответить
      1 декабря 2014 в 10:45

      Только разработчики знают, для чего они это сделали. Можно задать им вопрос на форуме вордпресс.

      • Дмитрий
        Ответить
        1 декабря 2014 в 16:02

        Чтобы блоггеры начали наконец-то изучать HTML ))))

        • Лариса

          Да ладно! Вы еще скажите — «пишущую машинку осваивать» )))) прогресс не стоит на месте, всю рутину нужно упрощать, а не усложнять.

        • Дмитрий
          Ответить
          1 декабря 2014 в 17:02

          Лариса, не спорю! просто предположил версию о причинах таинственной пропажи одной полезной кнопочки ))) да, сервисы и правда призваны упрощать сложное, но они же и разбаловали многих )

        • Евгений Вергус
          Ответить
          1 декабря 2014 в 23:53

          Точно. Так сказать выводят на новый уровень 🙂

  3. Лариса
    Ответить
    1 декабря 2014 в 13:07

    О, Женя, вижу баннербро у тебя :). Ну и как, есть польза?

    • Евгений Вергус
      Ответить
      1 декабря 2014 в 14:20

      Да, есть конечно. Пока тестирую. За месяц использования чуть больше 8 000 принес.

      • Лариса

        Неплохо. Учитывая, что ничего навязчивого здесь не наблюдается.

        • Евгений Вергус
          Ответить
          1 декабря 2014 в 15:40

          Да, так сказать почти пассивный доход 🙂

  4. Дмитрий
    Ответить
    1 декабря 2014 в 16:12

    Мне в таких случаях часто на помощь приходит Dreamweaver, разместил картинку, рамку или что-то подобное во вкладке «визуальный редактор», затем перешел в «текст», а там уже по коду смотрю, что изменилось, какой кусочек кода мне нужен. Но для этого уже желательно иметь хоть малейшее представление об HTML

    • Евгений Вергус
      Ответить
      1 декабря 2014 в 23:54

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

      • Дмитрий
        Ответить
        2 декабря 2014 в 11:59

        Да, в ней есть свои особенности, но все же функционал очень серьезный и в то же время не требует сверхспособностей от пользователей. А если появляется по ней какой-нибудь вопрос, то на помощь как всегда приходит google или яндекс )

        • Евгений Вергус
          Ответить
          2 декабря 2014 в 22:31

          google или яндекс дают ответы на все, это факт. Но и мой блог скоро их догонит 🙂 Шутка конечно...

        • Дмитрий
          Ответить
          3 декабря 2014 в 9:22

          У твоего блога есть просто замечательное отличие от поисковиков: на sovetywebmastera можно найти ответ на вопрос в готовом виде и разложенный по полочкам, а в поисковой выдаче яндекса еще надо повыбирать то, что ищешь среди десятков предложенных вариантов 😉

        • Евгений Вергус
          Ответить
          3 декабря 2014 в 10:06

          Спасибо 🙂

  5. Ильдар Тимербаев
    Ответить
    1 декабря 2014 в 16:59

    О, Евгений, спасибо за статью. А то я уже замучился в картинках то в левую, то правую в сторону увеличивать размер.

    Жаль, конечно, что убрали функцию расширенных настроек...

    • Евгений Вергус
      Ответить
      1 декабря 2014 в 23:56

      Да не за что! Это один из вариантов, но там можно поиграться с размерами в коде и еще доработать под себя.

  6. Ирина
    Ответить
    1 декабря 2014 в 17:16

    Женя, спасибо за подсказку! Так просто оказывается. Ох уж этот Ворпресс...

    • Евгений Вергус
      Ответить
      1 декабря 2014 в 23:56

      Все просто, когда знаешь как 🙂

      • Ирина
        Ответить
        2 декабря 2014 в 0:00

        А этот код нужно будет для каждой картинки ставить?

        • Евгений Вергус
          Ответить
          2 декабря 2014 в 0:06

          Да, для каждой в отдельности. Или не пудрить мозги и все оформлять как я — по центру 🙂

        • Ирина
          Ответить
          2 декабря 2014 в 0:11

          Может ты и прав. Подумаю

  7. Олег

    У меня отступ от картинок автоматически происходит, без настроек CSS

    • Евгений Вергус
      Ответить
      1 декабря 2014 в 23:56

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

      • Олег

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

      • Антон
        Ответить
        14 декабря 2014 в 22:35

        Значит от шаблона все таки зависит. Думаю, если шаблон «не подходящий», то значит можно дописать

        • Евгений Вергус
          Ответить
          14 декабря 2014 в 22:48

          Да, от шаблона многое зависит. Но пока ты Родину защищал, Вордпресс обновился и теперь функции отступа картинок отсутствуют, что вводит в заблуждение новичков 🙂

      • Надежда Суптеля
        Ответить
        11 февраля 2015 в 15:42

        Да Женя, многое зависит от шаблона. Муздыкалась я со всеми html и всеми остальными премудростями, плюнула на все, купила у Анфисы шаблон и теперь горя не знаю.

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

        и все таки с оптимизированным и готовым шаблоном приятнее работать. Но мы новички все, да и ты Женя не исключение, начинали с бесплатного. Это потом попозже, начинаем многое понимать и применять ИЗ ПЛАТНОГО РЕСУРСА УЖЕ ОПЫТНЫХ ИНФОБИЗНЕСМЕНОВ.

        • Евгений Вергус
          Ответить
          11 февраля 2015 в 20:45

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

  8. Татьяна
    Ответить
    2 декабря 2014 в 1:18

    Евгений — спасибо! Я вот обновила версию и статью с картинками поместила — что то не заметила прилипания... Но возможно картинки ПНЖ и поэтому. В любом случае спасибо вам за подсказку — в случае необходимости буду знать и обязательно ей воспользуюсь.

    С ув. Т.С

    • Евгений Вергус
      Ответить
      2 декабря 2014 в 10:11

      Всегда пожалуйста!

  9. Ирина
    Ответить
    2 декабря 2014 в 22:44

    Ребята, установите плагин TinyMCE Advanced и пользуйтесь кнопкой «Картинка вставить/изменить», там отступы просто значениями прописываются, все прекрасно работает.

    • Евгений Вергус
      Ответить
      3 декабря 2014 в 8:10

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

      • Дмитрий
        Ответить
        3 декабря 2014 в 9:25

        это точно! ко мне одна знакомая обратилась помочь с одним плагином (настроить что-то нужно было), как зашли в админку... просто кошмар, плагинов штук 30 наверное! на мой вопрос «зачем?» последовал невнятный ответ: «ну так же наверное нужно... я набрала в яндексе „какие плагины установить“ и установила ВСЕ, которые порекомендовали...» как вам такое? )))

        • Евгений Вергус
          Ответить
          3 декабря 2014 в 10:06

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

        • Дмитрий
          Ответить
          3 декабря 2014 в 11:34

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

        • Евгений Вергус
          Ответить
          3 декабря 2014 в 13:06

          Да, все происходит мгновенно в наше время и полчаса это очень много 🙂

        • Надежда Суптеля
          Ответить
          11 февраля 2015 в 15:44

          Это мало Дмитрий -30, у меня в свое время было 57, потом дошла до 30, попозже — 27, сейчас по моему меньше 18-ти.

  10. Егор

    Здравствуйте Евгений. Можно, что-бы постоянно не добавлять стили в редакторе, один раз найти в style.css классы .alignleft и .alignright и добавить в них

    {

    border: 10px solid #номер цвета; //нужно выбирать цвет фона контента

    }

    • Надежда Суптеля
      Ответить
      11 февраля 2015 в 15:49

      Верно Егор, в стили зайти и добавить код. Но не все могут, а точнее — могут, но не знают, как и что вставлять. Я однажды вставила один код и даже откат не помог — исчез блог. Спасибо ТаймВебу — помогли восстановить. И с тех пор я все экспериментирую на тестовом. Если сломаю, не проблема.

  11. Егор

    Картинки перед публикацией обязательно нужно прогонять через любую программу где есть «сохранить для веб».

    Там-же должна быть опция добавления рамок. Так вот и добавляйте рамку, например 10px. Цвет нужно ставить как и фон контента.

    Легко узнать фон контента можно скачав бесплатную и очень легкую программу под названием «multi-purpose color picker», В простонародье colorcop.

    Это как вариант

  12. Егор

    Женя, вот так точно будет на WordPress. Только что протестировал.

    Просто можно вставить в окончание файла style.css код:

    img.alignleft,

    img.alignright,

    img.aligncenter {

    border:10px solid #ffffff !important;

    }

    и потом сохранить и обновить страницу пару раз.

    Примечание для тех кто не знает что менять:

    border:10px (ширина в данном случае назовем отступом)

    #ffffff (цвет отступа)

    Все, больше ничего менять не нужно.

    Еще вариант:

    Картинки перед публикацией обязательно нужно прогонять через любую программу где есть «сохранить для веб».

    Там-же должна быть опция добавления рамок. Так вот и добавляйте рамку, например 10px. Цвет нужно ставить как и фон контента.

    Легко узнать фон контента можно скачав бесплатную и очень легкую программу под названием «multi-purpose color picker», В простонародье colorcop.

    Можешь добавить это в контент статьи? А то комменты не все читают.

    А те, выше мои затри нафиг.

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

    • Евгений Вергус
      Ответить
      4 декабря 2014 в 16:31

      Все комментарии сойдут 🙂 Спасибо за отличное дополнение!

      • Дмитрий
        Ответить
        4 декабря 2014 в 17:45

        В комментариях рождается истина! 🙂

        • Евгений Вергус
          Ответить
          6 декабря 2014 в 12:41

          Это бесспорный факт 🙂

    • Надежда Суптеля
      Ответить
      11 февраля 2015 в 15:59

      Егор, Ваша подсказка не под все шаблоны подходит, увы. Я протестировала 12 шаблонов — для интереса: 8 рунетовских, 4е забугорных — английских. В общем долго объяснять, но не под все шаблоны идет этот код. А есть еще темы, как у меня была — сгенерирована в Артистере. Там вообще очень многое по другому прописывается.

      • Егор

        Прописывается ВСЕ ПО ОДИНАКОВОМУ ! Отличие лишь в названиях классов. Что лезть в шаблон, когда лень научиться элементарно кликнуть правой кнопкой мышки или прямо в текстовом редакторе посмотреть какие классы применимы к картинки и исправить? Заказывайте тогда на фрилансе работу.

        Артистер тоже не фонтан.

        • Надежда Суптеля
          Ответить
          11 февраля 2015 в 16:15

          Согласна, прописывается все по одинаковому. Если бы все новички начинали с курса Евгения Попова и знали бы, что такое название классов и что такое Notepad, никто бы ничего не боялся.

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

    • Надежда Суптеля
      Ответить
      11 февраля 2015 в 16:04

      И как один товарищ написал у себя на блоге, не помню уже, чей сайт: Ни *ера не понимают в оптимизации, наляпали шаблонов по бестолковому или по одному шаблону, кое что видоизменяя, а новички теперь ...ся — читать мучатся.

      Жень, я не ругаюсь. Прочитала один прикол в Гугл+: Сидит одна девчонка, красуня такая и подпись: Пап, а мальчики матерки писали на доске. Отец: Надеюсь, ты не писала. Девочка: Неа, я им диктовала))))))))

      • Егор

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

        • Надежда Суптеля
          Ответить
          11 февраля 2015 в 16:21

          Я уже немного с этим знакома, со «скелетом». Правда, долго шла к этому. Но все равно интересно понять, как и что работает. И почему.

  13. Алексей
    Ответить
    9 декабря 2014 в 22:56

    2 года назад у меня были проблемы,тогда ещё была версия WordPress 3.4,потом 3.5 — в них было огромное количество ошибок,к тому же я скачал иножество плагинов,и вход на сайт закрылся.Пришлось начинать всё с начала,теперь у меня версия 4.0.1. и проблем не возникает,обновление версии происходит автоматически.Приятель-программист подтвердил валидность кода новой версии.Вот вам ответ — обновлять или не обновлять.

    • Надежда Суптеля
      Ответить
      11 февраля 2015 в 15:53

      Обновлять Алексей нужно постоянно — закрывать дыры от хакеров. Хотя, если им нужно пробраться — залезут. У меня вирус загнали после статьи про Очередной лохотрон. Сначала я грешила на то, что 5 миллионов или больше сайтов попали под вирус, а потом когда зашла в панель управления -> Пользователи. а у меня там присоединился один товарищ под названием артем. ну ничего — выгреблась.

  14. Егор

    Обновлять

  15. Ауес
    Ответить
    13 декабря 2014 в 23:19

    Спасибо Женя за полезную статью. Будем переставлять картинки.

    • Евгений Вергус
      Ответить
      14 декабря 2014 в 22:44

      Всегда рад помочь 🙂

  16. Антон
    Ответить
    14 декабря 2014 в 22:37

    А у меня WP 3.3.1 пока — вот такой я динозавр))) надо попробовать забекапиться и обновиться.

    Жень, я думаю в WP если выравнивать картинки по краям, то к таким картинкам будет подставляться Class -> можно в Css дописать стили для класса.

    Мне кажется разработчики WP не дураки и специально убрали отступы, чтобы все отступы регулировались шаблонами — не было лишних стилей. Но если шаблон старый, то это не учитывали разработчики((

    • Евгений Вергус
      Ответить
      14 декабря 2014 в 22:48

      Да, как обновишь, увидишь много нового 🙂 Пропиши стиль и поделись с нами в комментах 🙂

  17. oloeg

    здравствуйте! почему я никак не могу восстановить доступ к вашим партнёркам?

    • Евгений Вергус
      Ответить
      7 января 2015 в 21:40

      С доступом нет никаких проблем, чтобы восстановить свой пароль, достаточно воспользоваться ссылкой «забыли пароль» и следовать инструкциям.

  18. Тея

    Спасибо только дочитала полезность в ссылке.У меня фото прилипло к тексту.Не сразу сделала,но с 3 попытки все получилось.Я читаю коментарии и хочу заметить ,Евгений вы молодец,даете советы для начинающих правильно,а главное понятно,что за чем.Я вновь и вновь читаю курс,и что-то новое нахожу.Благодарю.

    • Евгений Вергус
      Ответить
      16 апреля 2015 в 13:20

      Спасибо большое, рад что мой блог приносит вам пользу 🙂

  19. Вадим Якупов
    Ответить
    3 сентября 2015 в 1:21

    Здравствуйте Евгений! Я заметил,код не копируется,это скрипт специальный стоит?

    • Евгений Вергус
      Ответить
      3 сентября 2015 в 22:06

      Ничего не установлено ) Не совсем понял, что именно не копируется?

    • Владимир Резнаов
      Ответить
      30 сентября 2015 в 0:58

      Да небольшая защита стоит, но Ctrl+C срабатывает. Не работает нажатие правой кнопкой мыши, не высвечивается меню.

  20. Владимир Резнаов
    Ответить
    30 сентября 2015 в 0:59

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

    • Евгений Вергус
      Ответить
      2 октября 2015 в 10:32

      Всегда пожалуйста )))

  21. Anna
    Ответить
    23 января 2016 в 1:51

    Евгений, здравствуйте! Я впервые на вашем блоге, но ваше имя в интернете я знаю давно, как очень успешного человека...Меня тоже интересовал этот вопрос по отступам...Читала много статей, пробовала исправить ситуацию, но ничего пока не выходило...А вот по вашей статье и по вашим рекомендациям у меня всё получилось...Спасибо вам огромное за такую помощь начинающим...Чаще всего я, как и вы, ставлю картинки по центру, но иногда нужно поставить их по-другому...Теперь я могу их ставить, как мне будет нужно... С уважением, Анна.

    • Евгений Вергус
      Ответить
      23 января 2016 в 21:36

      Анна, отлично ) Я рад что моя статья Вам помогла разобраться с картинками )

  22. Мария
    Ответить
    25 марта 2016 в 2:44

    Спасибо большое, Евгений!

    Очень полезный код. Предыдущий шаблон не требовал подобного, все вставало сразу, а новый «прилип» — очень кстати код пришелся!

    С уважением,

    Мария

    • Евгений Вергус
      Ответить
      25 марта 2016 в 14:56

      Вот и замечательно, рад что пригодилась статья )

  23. Мария
    Ответить
    25 марта 2016 в 3:52

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

    • Евгений Вергус
      Ответить
      25 марта 2016 в 14:56

      Вот и сами разобрались )) Все работает как часы )

  24. Татьяна
    Ответить
    14 июля 2016 в 1:58

    Добрый день, Евгений. Прочитав Вашу статью и выполнив нужное действие, ещё раз убедилась в верности Вашего любимого высказывания: «Всё просто и ясно.» Спасибо за помощь!

    • Евгений Вергус
      Ответить
      18 июля 2016 в 22:28

      Спасибо )) Да, так и есть, главное знать что и как делать )

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