Блог Евгения Вергуса Советы Вебмастера

Начните зарабатывать на партнерских программах, даже если у вас нет опыта и знаний! Скачайте бесплатный видеокурс по партнерским программам. Получить бесплатно
Евгений Вергус
Рубрики блога: Показать все

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

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

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

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

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

Спасибо Вам за то, что поделились статьей в социальных сетях!
Вконтакте
Телеграм
Рекомендую ознакомиться с похожими статьями:
Оставлено 86 комментариев
  • Сергей

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

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

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

      • Лариса

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

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

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

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

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

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

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

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

  • Иван

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

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

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

      • Дмитрий

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

      • Лариса

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

      • Дмитрий

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

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

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

  • Лариса

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

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

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

      • Лариса

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

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

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

  • Дмитрий

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

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

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

      • Дмитрий

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

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

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

      • Дмитрий

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

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

        Спасибо 🙂

  • Ильдар Тимербаев

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

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

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

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

  • Ирина

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

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

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

      • Ирина

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

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

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

      • Ирина

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

  • Олег

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

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

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

      • Олег

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

      • Антон

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

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

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

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

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

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

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

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

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

  • Татьяна

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

    С ув. Т.С

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

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

  • Ирина

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

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

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

      • Дмитрий

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

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

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

      • Дмитрий

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

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

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

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

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

  • Егор

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

    {

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

    }

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

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

  • Егор

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

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

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

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

  • Егор

    Женя, вот так точно будет на 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, никто бы ничего не боялся.

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

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

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

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

      • Егор

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

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

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

  • Алексей

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

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

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

  • Егор

    Обновлять

  • Ауес

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

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

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

  • Антон

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

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

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

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

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

  • oloeg

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

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

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

  • Тея

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

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

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

  • Вадим Якупов

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

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

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

    • Владимир Резнаов

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

  • Владимир Резнаов

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

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

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

  • Anna

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

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

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

  • Мария

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

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

    С уважением,

    Мария

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

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

  • Мария

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

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

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

  • Татьяна

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

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

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

  • Марина

    Ура! Ура! Всё получилось! Стало очень красиво и гармонично. Благодарю! Единственное маленькое неудобство, что так каждый раз нужно будет делать к новой статье.

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

      Если знает стили, то можно прописать в коде 1 раз )

  • Т. А.

    Спасибо. Мне помогло)

  • Ирина

    Спасибо! Так гарненько стоит картиночка.

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

Ваш адрес email не будет опубликован.