Заметки по Wordpress

Делаем выравнивание по ширине красивым

Совсем недавно столкнулся с такой задачей, что понадобилось  в шаблоне очередного заказа  выравнять текст  по ширине ( justify ).
Выравнивание текста по ширине  и отображение его в узких столбцах известная проблема  многих веб-верстальщиков. Долго описывать не буду, но выглядит это ужасно с переносом длинных слов и большими промежутками между слов.


Было:

Решение было найдено благодаря одному замечательному плагину для wordpress   Hyphenator .
Hyphenator автоматически вставляет  тире  в конце строки текста.
Но активировать плагин не достаточно. Надо присвоить класс данного плагина к вашему основному шаблону, иначе РАБОТАТЬ НЕ БУДЕТ .

[crayon lang=’html’]class=”hyphenate text”[/crayon]

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

И так  находим  тег  в который заключено содержание поста, как правило это
[crayon lang=’php’]< ?php the_content(); ?>[/crayon]
но в разных шаблонах зависимо от уровня сложности может отличаться  и присвоить ему данный стиль и класс
[crayon lang=’html’]class=”hyphenate text” style=”text-align: justify;”[/crayon]
После этого проверяем и у нас должен получиться желаемый результат.
Стало:

Этот метод мне настолько понравился, что мы решили сделать его на данном сайте.

У кого, что не получается или не понятно пишите в комментарии.

 

[download=http://downloads.wordpress.org/plugin/hyphenator.3.3.0.1.zip]

P.S. Как в css сделать перенос слов на другую строчку

Для того, что бы сделать в css перенос строк или слов надо добавить в файл стилей всего лишь один кроссбраузерный и валидный код:

white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, начиная с 1999 года */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */

Новые посты

Запрещаем индексацию https с помощью .htaccess

Гордеев Игорь

Выделяем комментарии автора в wordpress

Гордеев Игорь

Добавляем произвольные поля (Custom fields) в пользовательские типы сообщений

Гордеев Игорь

25 комментариев

Фикрет 03.11.2011 / 20:10

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

Ответить
Сергей 30.01.2012 / 15:30

Отличная статья, у меня самого есть блог на wordpress, и сам долго мучился с этой проблемой, теперь надеюсь, что решу ее с помощью этого плагина.

Ответить
Павел 04.02.2012 / 03:59

наверное не правильно чтото делаю, не получается

Ответить
Гордеев Игорь 04.02.2012 / 14:53

А что именно делали, плагин Hyphenator установили?

Ответить
Павел 04.02.2012 / 15:50

Установил, активировал. Не получается выполнить услови “присвоить ему данный стиль и класс” . я так понял это нужно сделать в ВНЕШНИЙ ВИД/РЕДАКТОР/SIMPLE.PHP но по видимому, не хватает знаний по оформлении этого .(( Если не трудно роскажите поподробней!

Ответить
Гордеев Игорь 04.02.2012 / 23:26

Если Вам надо применить данный метод к выводу полного поста, то вы правы надо править(single.php)
Ищите:

< ?php the_content(); ?>

и заменяйте на

< ?php the_content(); ?>

по аналогии делаем и в других местах где надо применить данный эффект

Ответить
Максим 12.03.2012 / 22:30

Спасибо, Игорь за Ваш труд. С этим плагином у меня все получилось с первого раза. Текст выровнялся по ширине. 💡

Ответить
Максим 16.03.2012 / 16:02

Добрый день, Игорь. Хотел спросить обновлять этот плагин надо, а то у меня уже неделю висит обновление до версии 4.0.0?

Ответить
Гордеев Игорь 16.03.2012 / 16:47

Можете обновить, я лично обновил косяков в работе не заметил 😛

Ответить
Алексей 30.03.2012 / 21:44

Здравствуй, Игорь! У меня что-то не получается(( Сделал как все написано – нашел single, заменил на , может мне еще в style.css надо заменять?

Ответить
Алексей 30.03.2012 / 22:16

Просто прописал в body.content, в style.css, и сейчас выравнивает, но чтобы плагин с разделением слов заработал, не получилось :smile:, а как у вас плагин на комментарии называется?)

Ответить
Гордеев Игорь 30.03.2012 / 22:48

Алексей, добрый день!
Смотрел ваш сайт полную новость, у вас работают переносы. А вот на главной странице не работает, что бы это исправить надо в файл index.php (как правило,все зависит от вашего шаблона) в нужном месте присвоить

class="hyphenate text"

И не совсем понял про какой плагин вы имеете ввиду, тот что в форме написания комментария?

Ответить
Алексей 31.03.2012 / 18:13

Привет! Да, ты совершенно прав, я заметил это чуть-чуть позже. Поищу, где присвоить в index.pgh, хотя и так не плохо)

-Да, очень хотелось бы такую панельку в комментариях как у вас – с редактированием текста и смайликами – буду благодарен за объяснения.

Ответить
Гордеев Игорь 31.03.2012 / 20:25

Comment Form Toolbar – этот то самый плагин, который вам нужен.
Он создает эту самую панель. НЕ требует редактирования в коде темы, просто активируйте плагин и все можно работать.

Ответить
Алексей 04.04.2012 / 01:49

Спасибо, большое – сейчас попробую! :mrgreen:

Ответить
Алексей 04.04.2012 / 02:34

Сразу возникает еще вопрос, а как сделать галочку для подписи на комментарии (чтобы на почту приходили обновления) буду очень признателен!! =)

Ответить
Гордеев Игорь 04.04.2012 / 10:34

В подписке на комментарии вам поможет плагин Subscribe to Comments Reloaded

Ответить
Алексей 04.04.2012 / 14:18

Отлично, еще раз огромное спасибо, добавил Ваш сайт в закладки, рекомендую друзьям – будем дружить! 💡

Ответить
Гордеев Игорь 04.04.2012 / 17:44

Конечно будем дружить !!!

Ответить
Светлана 17.05.2012 / 02:41

Игорь! Большое спасибо за подсказку!Все с переносами получилось с первого раза, и текст буквально “заиграл”! Сейчас хочу практически с нуля сделать свой сайт,и обязательно буду часто заглядывать за подсказками к Вам 🙂

Ответить
Гордеев Игорь 17.05.2012 / 09:59

Рад помочь! Буду рад видеть вас снова! 😕

Ответить
intelegent 20.06.2012 / 12:05

Достаточно хорошо расписали тоже искал решение этой проблемы, благодаря вам решил 😉

Ответить
Papay 10.04.2013 / 16:13

у меня при использовании этого плагина все работает в Хроме и ИЕ, а Опера и Мозила ругаются

Security error: attempted to read protected variable

в чем дело?

Ответить
Гордеев Игорь 10.04.2013 / 16:31

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

Ответить
Papay 10.04.2013 / 19:00

разобрался надо включить галочку тут

use Hyphenator.js from developer trunk

вдруг кому то пригодиться 😉

Ответить

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