Улучшаем админку Wordpress



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

Опустим минусы и плюсы такого способа хранения данных в базе CMS, перейдем к улучшениям.

Задача

Сделать гибкие поля ввода внутри TinyMCE.

Решение

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

У нас есть несколько DIV в которые мы вводим определенные данные. Например «Должность» и «Дипломы и награды». Фронтэнд, например, с помощью Jquery берет содержание этих DIV'ов и помещает их в нужное место в шаблоне дизайна страницы. У нас задача подписать поля ввода в редакторе, но чтобы они не показывались на фронтэнде, так как у нас там «уникальный дизайн, а с javascript'ом, ой долго».

Разметочка

<div class="adm-div" id="dolzhnost"></div>
<div class="adm-div" id="diplomas"></div>

Как видно вот они поля.

Стили

.adm-div {
    border:1px solid black;
    padding:4px;
    position:relative; // Нужно чтобы абсолютное позиционирование наследственных элементов начиналось от границ родителя
    margin-top:14px; //Освобождаем место для подписи поля
    margin-bottom:30px;
}

Нехитрый стиль

А теперь к хитростям. CSS-генерируемые данные! К удивлению не все знают об этом.

Итак стиль для псевдоэлемента :before у нашего класса .adm-div

.adm-div:before {
    position:absolute;
    display:block;
    background-color:black;
    color:white;
    top:-13px;
    left:-1px;
    font-size:10px;
    padding:0px 2px 1px 2px;
}


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


#dolzhnost:before {
content:"Должность";
}
#diplomas:before {
content:"Дипломы и награды";
}


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



Вот собственно и все. Человеку не прочитавшему указанную выше статью, эта моя писанина покажется очень странной :)

Проект на jsfiddle

Скоро: Прелести HSL модели цвета
  • +1

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

avatar
  • MpaK
  • 0
Забавный хак и применение content, только почему не делать это прям в шаблонах? или эти поля динамечески создаются? Ну так и css тоже прийдётся с новым полем править, нет?
avatar
  • default
  • 0
Это как раз для тех случаев, когда не хочется связываться с доп. полями которые срут в базу. Это скорее для того чтобы секретарши правильно заполняли сайт ))
avatar
  • MpaK
  • 0
Ну то есть просто хак по быстрому.

Я кстати так и не понял в чем прелесть Wordpress для секретарш-то, всё же там так дико внутри наварочено, пока по вопросам поконсультируешь помереть можно :)
avatar
  • default
  • 0
Хоть и в нете полно инфы по упрощению, видимо напишу еще статейку по своей методике )) добавте уже dessert-ufa.ru в уфимские сайты ))))))
avatar
  • MpaK
  • 0
Добавим добавим :) тоже Вордпресс внутри?
avatar
  • default
  • +1
Да, по-другому я не умею )))
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.