Как сделать отступ от картинок в WordPress
Всем снова большой привет! В данной статье расскажу о том, как сделать отступ от картинок в новом WordPress. Ведь после обновления и выхода версии 3.9 и выше, возможность дополнительных настроек была удалена и теперь делать отступы стало сложнее. Точнее, данной функции нет вообще.
![wordpress wordpress](https://sovetywebmastera.ru/wp-content/uploads/2014/11/wordpress.jpg)
В принципе, лично моего блога это не коснулось, потому как я всегда оформляю свои статьи в одном стиле и картинки размещаю по центру на всю ширину записи. Но я получил очень много вопросов от своих учеников на эту тему и поэтому решил написать данный пост для тех, кто вставляет картинки справа или слева от текста.
После выхода версии вордпресс 3.9 и выше, текст стал прилипать к картинкам и все это смотрится не очень красиво, а точнее ужасно. Решений здесь есть несколько, но я решил написать о самом простом и самом доступном для новичка. Вы просто поставите кусочек кода в нужное место и все. Хотя можно прописать стили CSS, но это требует определенных знаний кода.
Давайте посмотрим на примере. Сейчас, если разместить картинку слева или справа, то она выглядит примерно вот так.
![2014-11-30 2014-11-30](https://sovetywebmastera.ru/wp-content/uploads/2014/11/2014-11-30.jpg)
Как видите, не очень красиво, это еще мягко сказано. Но мы можем решить данную проблему очень быстро и сделать отступы от картинок при помощи одного маленького действия. Но в начале давайте посмотрим, что у нас получится в итоге.
Теперь наша картинка выглядит более прилично.
![2014-11-30_1 2014-11-30_1](https://sovetywebmastera.ru/wp-content/uploads/2014/11/2014-11-30_1.jpg)
Теперь давайте разберемся, как это сделать. На самом деле нет ничего сложного. Достаточно вставить вот этот style="border: 7px solid white; margin: 7px;" небольшой код в нужное место. Для этого идем в редактор нашей статьи, далее нажимаем на кнопку «Текст» и находим в коде нашу картинку. Сделать это не сложно. Код вставляем сразу после номера картинки и перед тегом src="
Все подробно показал на скриншоте ниже:
![2014-11-30_193311 2014-11-30_193311](https://sovetywebmastera.ru/wp-content/uploads/2014/11/2014-11-30_193311.jpg)
В общем, это все. Надеюсь все ясно и понятно. Конечно для полноты картины нужно было и видео записать, но я думаю, что и так все ясно. Если будут вопросы, я с радостью на них отвечу в комментариях. Еще раз повторяю, что это один из способов сделать отступ от картинок в вордпресс, но есть и другие.
Кстати, Вы можете в комментариях поделиться своими решениями данной проблемы. Лично я ее решил просто, все мои картинки размещены по центру статей. Так то Вы знаете уже целых два способа решения данной проблемы.
На этом на сегодня все. Как всегда жду ваших вопросов и комментариев к данной статье. Надеюсь, что данная статья принесет Вам пользу и вы решите проблему отступа текста от картинок.
С уважением, Евгений Вергус.
Спасибо, Евгений. Все очень понятно и оказывается совсем не сложно! Хочется думать, что разработчики новой версии что-то не доделали и уже в следующей редакции таких «косяков» с отступами не будет (вернут все на место)...
Не думаю, уже вышло много редакций, но данной функции так и нет.
Да, очень неудобно. Можно, конечно, и ручками код вставлять, но раньше было лучше...
Конечно было лучше, только я всегда по центру размещал картинки. Вернее не всегда, но уже довольно давно.
Можно еще стиль прописать и его указывать в настройках картинки.
Я тоже Женя сейчас все картинки по центру размещаю, мне так нравится и еще где — то не помню, читала, что по центру бОльший эффект. Пока не разобралась — чего эффект.
По поводу эффекта не могу сказать, не думаю что от того что картинка по центру будет больший эффект 🙂
Может быть тогда не стоит обновлять вордпресс до версии 3.9, что-то я передумал это делать. Зачем если ни чего лучшего, а только хуже, разве не должно быть наоборот? Что то я совсем не понимаю для чего это сделано!
Только разработчики знают, для чего они это сделали. Можно задать им вопрос на форуме вордпресс.
Чтобы блоггеры начали наконец-то изучать HTML ))))
Да ладно! Вы еще скажите — «пишущую машинку осваивать» )))) прогресс не стоит на месте, всю рутину нужно упрощать, а не усложнять.
Лариса, не спорю! просто предположил версию о причинах таинственной пропажи одной полезной кнопочки ))) да, сервисы и правда призваны упрощать сложное, но они же и разбаловали многих )
Точно. Так сказать выводят на новый уровень 🙂
О, Женя, вижу баннербро у тебя :). Ну и как, есть польза?
Да, есть конечно. Пока тестирую. За месяц использования чуть больше 8 000 принес.
Неплохо. Учитывая, что ничего навязчивого здесь не наблюдается.
Да, так сказать почти пассивный доход 🙂
Мне в таких случаях часто на помощь приходит Dreamweaver, разместил картинку, рамку или что-то подобное во вкладке «визуальный редактор», затем перешел в «текст», а там уже по коду смотрю, что изменилось, какой кусочек кода мне нужен. Но для этого уже желательно иметь хоть малейшее представление об HTML
Хорошая программа, первый сайт я делал именно в ней 🙂 Но ее тоже нужно знать хотя бы немного.
Да, в ней есть свои особенности, но все же функционал очень серьезный и в то же время не требует сверхспособностей от пользователей. А если появляется по ней какой-нибудь вопрос, то на помощь как всегда приходит google или яндекс )
google или яндекс дают ответы на все, это факт. Но и мой блог скоро их догонит 🙂 Шутка конечно...
У твоего блога есть просто замечательное отличие от поисковиков: на sovetywebmastera можно найти ответ на вопрос в готовом виде и разложенный по полочкам, а в поисковой выдаче яндекса еще надо повыбирать то, что ищешь среди десятков предложенных вариантов 😉
Спасибо 🙂
О, Евгений, спасибо за статью. А то я уже замучился в картинках то в левую, то правую в сторону увеличивать размер.
Жаль, конечно, что убрали функцию расширенных настроек...
Да не за что! Это один из вариантов, но там можно поиграться с размерами в коде и еще доработать под себя.
Женя, спасибо за подсказку! Так просто оказывается. Ох уж этот Ворпресс...
Все просто, когда знаешь как 🙂
А этот код нужно будет для каждой картинки ставить?
Да, для каждой в отдельности. Или не пудрить мозги и все оформлять как я — по центру 🙂
Может ты и прав. Подумаю
У меня отступ от картинок автоматически происходит, без настроек CSS
Многое еще от самого шаблона зависит. Причем у тебя все прописано в стилях сразу. Если убрать данный стиль, то тоже прилипнет вот так 🙂![pix](https://sovetywebmastera.ru/wp-content/uploads/2014/12/2014-12-02_000120.jpg)
да, верно, я когда пробовал менять шаблон, так с другим шаблоном текст прилипал к картинкам
Значит от шаблона все таки зависит. Думаю, если шаблон «не подходящий», то значит можно дописать
Да, от шаблона многое зависит. Но пока ты Родину защищал, Вордпресс обновился и теперь функции отступа картинок отсутствуют, что вводит в заблуждение новичков 🙂
Да Женя, многое зависит от шаблона. Муздыкалась я со всеми 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 не дураки и специально убрали отступы, чтобы все отступы регулировались шаблонами — не было лишних стилей. Но если шаблон старый, то это не учитывали разработчики((
Да, как обновишь, увидишь много нового 🙂 Пропиши стиль и поделись с нами в комментах 🙂
здравствуйте! почему я никак не могу восстановить доступ к вашим партнёркам?
С доступом нет никаких проблем, чтобы восстановить свой пароль, достаточно воспользоваться ссылкой «забыли пароль» и следовать инструкциям.
Спасибо только дочитала полезность в ссылке.У меня фото прилипло к тексту.Не сразу сделала,но с 3 попытки все получилось.Я читаю коментарии и хочу заметить ,Евгений вы молодец,даете советы для начинающих правильно,а главное понятно,что за чем.Я вновь и вновь читаю курс,и что-то новое нахожу.Благодарю.
Спасибо большое, рад что мой блог приносит вам пользу 🙂
Здравствуйте Евгений! Я заметил,код не копируется,это скрипт специальный стоит?
Ничего не установлено ) Не совсем понял, что именно не копируется?
Да небольшая защита стоит, но Ctrl+C срабатывает. Не работает нажатие правой кнопкой мыши, не высвечивается меню.
Женя, а тебе вообще большое спасибо за твой блог. Данная статья теперь и меня будет выручать. Наконец-то перестану мучиться.
Всегда пожалуйста )))
Евгений, здравствуйте! Я впервые на вашем блоге, но ваше имя в интернете я знаю давно, как очень успешного человека...Меня тоже интересовал этот вопрос по отступам...Читала много статей, пробовала исправить ситуацию, но ничего пока не выходило...А вот по вашей статье и по вашим рекомендациям у меня всё получилось...Спасибо вам огромное за такую помощь начинающим...Чаще всего я, как и вы, ставлю картинки по центру, но иногда нужно поставить их по-другому...Теперь я могу их ставить, как мне будет нужно... С уважением, Анна.
Анна, отлично ) Я рад что моя статья Вам помогла разобраться с картинками )
Спасибо большое, Евгений!
Очень полезный код. Предыдущий шаблон не требовал подобного, все вставало сразу, а новый «прилип» — очень кстати код пришелся!
С уважением,
Мария
Вот и замечательно, рад что пригодилась статья )
Спасибо еще раз за курсы, Евгений, хотелось бы быстрее обучаться, но пока не получается по времени — жду каждый день продолжения, как праздника!
Вот и сами разобрались )) Все работает как часы )
Добрый день, Евгений. Прочитав Вашу статью и выполнив нужное действие, ещё раз убедилась в верности Вашего любимого высказывания: «Всё просто и ясно.» Спасибо за помощь!
Спасибо )) Да, так и есть, главное знать что и как делать )
Ура! Ура! Всё получилось! Стало очень красиво и гармонично. Благодарю! Единственное маленькое неудобство, что так каждый раз нужно будет делать к новой статье.
Если знает стили, то можно прописать в коде 1 раз )
Спасибо. Мне помогло)
Спасибо! Так гарненько стоит картиночка.