Как сделать отступ от картинок в 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

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

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

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

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

Спасибо Вам за то, что поделились статьей в социальных сетях!


Рекомендую ознакомиться с похожими статьями:

Кликните на картинку и получите мой видеокурс Бесплатно!

Подпишись на RSS-рассылку. Будь в курсе!

введите свой e-mail:


К записи "Как сделать отступ от картинок в WordPress" оставлено 80 коммент.
  1. Сергей:

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

    Ответить
    • Евгений Вергус:

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

      Ответить
      • Лариса:

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

        Ответить
        • Евгений Вергус:

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

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

        • Надежда Суптеля:

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

        • Евгений Вергус:

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

  2. Иван:

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

    Ответить
    • Евгений Вергус:

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

      Ответить
      • Дмитрий:

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

        Ответить
        • Лариса:

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

        • Дмитрий:

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

        • Евгений Вергус:

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

  3. Лариса:

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

    Ответить
    • Евгений Вергус:

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

      Ответить
  4. Дмитрий:

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

    Ответить
    • Евгений Вергус:

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

      Ответить
      • Дмитрий:

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

        Ответить
        • Евгений Вергус:

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

        • Дмитрий:

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

        • Евгений Вергус:

          Спасибо :)

  5. Ильдар Тимербаев:

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

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

    Ответить
    • Евгений Вергус:

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

      Ответить
  6. Ирина:

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

    Ответить
  7. Олег:

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

    Ответить
    • Евгений Вергус:

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

      Ответить
      • Олег:

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

        Ответить
      • Антон:

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

        Ответить
        • Евгений Вергус:

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

      • Надежда Суптеля:

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

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

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

        Ответить
        • Евгений Вергус:

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

  8. Татьяна:

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

    С ув. Т.С

    Ответить
  9. Ирина:

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

    Ответить
    • Евгений Вергус:

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

      Ответить
      • Дмитрий:

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

        Ответить
        • Евгений Вергус:

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

        • Дмитрий:

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

        • Евгений Вергус:

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

        • Надежда Суптеля:

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

  10. Егор:

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

    {

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

    }

    Ответить
    • Надежда Суптеля:

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

      Ответить
  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 у тебя брал, с пол года назад. И посещаю иногда твой сайт с удовольствием. Партнерками правда плотно не увлекаюсь, но выхлоп от них у меня есть, конечно. А если тебя люди в рунете знают, то и заработки на порядки выше.

    Ответить
    • Евгений Вергус:

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

      Ответить
    • Надежда Суптеля:

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

      Ответить
      • Егор:

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

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

        Ответить
        • Надежда Суптеля:

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

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

    • Надежда Суптеля:

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

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

      Ответить
      • Егор:

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

        Ответить
        • Надежда Суптеля:

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

  13. Алексей:

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

    Ответить
    • Надежда Суптеля:

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

      Ответить
  14. Егор:

    Обновлять

    Ответить
  15. Ауес:

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

    Ответить
  16. Антон:

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

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

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

    Ответить
    • Евгений Вергус:

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

      Ответить
  17. oloeg:

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

    Ответить
    • Евгений Вергус:

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

      Ответить
  18. Тея:

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

    Ответить
    • Евгений Вергус:

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

      Ответить
  19. Вадим Якупов:

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

    Ответить
    • Евгений Вергус:

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

      Ответить
    • Владимир Резнаов:

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

      Ответить
  20. Владимир Резнаов:

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

    Ответить
  21. Anna:

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

    Ответить
    • Евгений Вергус:

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

      Ответить
  22. Мария:

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

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

    С уважением,

    Мария

    Ответить
    • Евгений Вергус:

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

      Ответить
  23. Мария:

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

    Ответить
    • Евгений Вергус:

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

      Ответить

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

WordPress: 15.69MB | MySQL:56 | 0,850sec