Получайте секретные материалы проекта на свой E-Mail:

Мой первый плагин WP-Boxes CSS. Прошу любить и жаловать!

Приветствую Вас, Дорогие Друзья. Как настроение? Как погода? Знаете, я тут плагин, специально для Вас сделал сделал — WP-Boxes CSS называется. Нет, это не шутка, я и сам пока не до конца в это верю, но это действительно так. И сегодня я хочу презентовать Вам данную разработку и поделиться с ней абсолютно бесплатно. plagin-wp-boxes-css

Сижу значит вчера и думаю «Вот бы чего новенького сделать», и тут раз мысль в головку «А что, если попробовать самому создать плагин?». Так и пришла у меня идея создания плагина. А тему долго и придумывать даже не пришлось, так как она у меня уже давно сидела в голове и выпрашивалась наружу.

Странно, да, что сначала у меня пришла идея создать плагин, а уже потом обдумывалась тема? Обычно ведь происходит наоборот 🙂 Вот так нужно креативно мыслить...

Недавно на моем блоге был оставлен следующий комментарий от моего частого посетителя:Комментария частого посетителя блога

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

После часа работы я сделал такую замечательную DIV-колонку, но для ее реализации понадобилось вручную возиться сразу в нескольких файлах шаблона WordPress: functions.php, style.css и вставлять длинный и нудный код во время написания статьи. Николай бы справился, я не спорю, но разве справился бы с этим новичок? Думаю, что нет...

Поэтому вместе с идеей создать плагин у меня возникла идея автоматизировать весь этот процесс в два клика! И хочу сказать, что у меня это отлично получилось. На выходе у меня появился очень легкий и простой в освоении плагин под названием «WP-Boxes CSS», задача которого заключается в том, чтобы оформлять текст в красивые CSS блоки. 

На создание этого чуда у меня ушел один вечер, я сам был приятно этому удивлен. И сейчас я хочу поделиться им с Вами — встречайте, Друзья!Логотип WP-Boxes CSS

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

Так вот, подобных плагинов действительно много, но почему я решил сделать именно свой плагин, а не воспользоваться уже готовым вариантом?

1. Я не люблю легких путей 🙂 ;

2. Большинство подобных плагинов нагружают блог;

3. Необходимо вручную вписывать шорткоды;

4. Стили этих плагинов уже устарели;

5. Решил попробовать себя в роли программиста 🙂 .

И как раз по всем этим причинам я решил, что буду создавать плагин сам! Сделаю его очень легким, красивым и простым в использовании, да и просто буду знать, что внутри плагина, а то вдруг во всех аналогичных плагинах вирус сидит!?

Демонстрация плагина

Что я все говорю, да говорю, давайте-ка лучше взглянем на данный плагин изнутри! Вы готовы, тогда вперед...

Блок для важной информации

Данный блок служит для отображения какой-то важной и полезной, возможно ключевой, информации.

Блок для вопросительной информации

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

Блок для одобрительной информации

Данный блок служит для отображения одобрительной, правильной информации, на которую стоит обратить свое внимание.

Блок для отрицательной информации

Данный блок служит для отображения отрицательной, либо неодобрительной информации.

Ну как Вам, нравится? Пишите в комментариях свое мнение.

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

Настроек нет, но сама страница плагина в Административной панель есть, и выглядит она следующим образом (кликабельно).

Страница плагина в админ-панели

 

Как пользоваться данным плагином?

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

Кнопки в визуальном редакторе

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

Модальное окно

Далее открываете страницу и любуетесь, все получилось. Если возникли какие-то проблемы — пишите мне, буду разбираться.

Так же, если по каким-то причинам Вы не хотите пользоваться кнопками (ну мало ли 🙂 ), можно использовать следующие «ShortCodes — Шорткоды»:

[information]Для отображения важной информации[/information]
[help]Для отображения вопросительной информации[/help]
[ok]Для отображения одобрительной информации[/ok]
[warning]Для отображения отрицательной информации[/warning]

Вот так, все легко делается!

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

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

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

Просто заполните свое имя и E-mail и нажмите получить плагин! После чего придет письмо с ссылкой на активацию подписки, по которой Вам нужно будет перейти и Вы получите ссылку на скачивание плагина.

ПЛАГИН ВРЕМЕННО НЕ РАСПРОСТРАНЯЕТСЯ!!!



Спасибо за внимание.

Желаю удачи и до встречи!

С уважением, Константин Белан.

Белан Константин Сергеевич

С уважением, Константин Белан.

Рабочая 634570 Россия, Томская обл., г. Томск, +7 952 160 36 17
Сделайте мне приятно - нажмите на любую из кнопок:
Подпишитесь на рассылку блога и получайте новые статьи на свою почту
Количество комментариев к данной статье: 96
  1. Ответить

    Идея плагина вроде бы неплохая. Надо будет попробовать скачать и использовать на своем блоге.

    • Ответить

      Александр очень удобно так что советую ставьте не пожалеете.

      • Ответить

        Мне тоже он очень понравился. недавно вроде даже обновление было. так что плагин классный, ничего подобного не встречал

  2. Ответить

    Отлично! Сейчас испробуем! Спасибо большое, оформление действительно очень красивое 🙂

  3. Ответить

    Вот это я понимаю бесплатный продукт!!!!!

    Спасибо Костя.

    напиши статью как сделал плагин!!! плиз)

    • Ответить

      Согласен, Антон!

      Такая статейка будет востребована.

      Поздравляю с созданием первого плагина, Костя!

    • Ответить

      Я бы тоже почитал, может и сам какой нибудь плагин сделал

  4. Отличный плагин Костя! Поздравляю с первым опытом в создании плагинов под WordPress! Поддерживаю Антона, статья о создании плагина, построенная наличном опыте, будет весьма кстати.

  5. Ответить

    Спасибо! Идея просто отличная выделять блоги информации!

    Жду плагин... Хочу установить и продегустировать... 🙂

  6. Ответить

    Костик! Молодец ты какой! Подписалась на получение плагина. Хочу пощупать, что за зверь такой...

  7. Ответить

    Класс! Сейчас же начинаю устанавливать! Посмотрим, что и как 😉

    О результатах сразу же доложу!

    • Буду ждать результатов!

      • Ответить

        Костя, извиняюсь за оговорочку 🙁

    • Ответить

      Скачал, активировал и уже опробовал. Супер!

      Вот подтверждение (ссыль неактивная) — _http://svital.com/wp-content/uploads/2014/07/Plagin_ot_seokos.png

      Спасибо большое, Костя!

      • Ответить

        Ой, сорри, Костя! Ошибся с именем торопясь доложить результат 🙂

        • Да ничего страшного! Очень рад, что все отлично установилось и работает 🙂

          • Ответить

            И я тоже очень доволен.

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

            • Ответить

              А я установила и пришлось удалить — несовместимость...Перепугалась — на весь вечер!

  8. Ответить

    Молодчага Константин как раз в тему. Плагин скачал на днях протестирую.

  9. Ответить

    Молодец! Уже собственный плагин создал! Он будет полезен очень многим! Теперь его надо отправить WordPress, чтобы можно было скачивать сразу из админки через поиск

    • Уже отправил, жду одобрения 🙂

  10. Ответить

    Ух ты! Блоки действительно красивые и подходят многим дизайном. Благодарю за плагин!

  11. Ответить

    Поздравляю с созданием первого плагина! А я пока только шаблон создал, да и то, ещё не выложил.

  12. Круто. Не думал что создать плагин так легко.) Надеюсь вы будете продолжать работу над плагином и добавите настройки.

  13. Ответить

    В чем отличие перед тем же плагином WP-Note?

    • Я ждал этого вопроса 🙂

      Ну во-первых, WP-Note как-то уже устарел стилями.

      И во-вторых, WP-Boxes CSS намного легче и меньше нагружает блог (проверял лично).

      • Ответить

        Спасибо за разъяснения.

      • Ответить

        Интересно нужно обязательно попробовать. Раньше у меня тоже стоял WP-Note на другом блоге а на этом пока руки не доходили его поставить. На верное к лучшему.

  14. Ну-ка попробую!!)) Потом напишу свои впечатления!!))

  15. Ответить

    Оформил подписку, что то не приходит письмо на скачку плагина

    • Видимо Смарт что-то глючит, подожди до вечера. Я вечером версию 1.1 выложу, некоторый косяк был замечен...

  16. Ответить

    Костя, ну ты ваще маладца, плагины сам пишешь! 🙂 Скачал, установил у себя. Применил в статье у себя на блоге «Как сделать электронную книгу» — zarabotaynasayte.ru/kak-sdelat-elektronnuyu-knigu/ Вроде все работает, но какая-то рамка добавилась на весь пост и форматирование текста съехало, все вправо почему-то, а окно в форме подписки в конце статьи — наоборот влево сдвинулось. Может это конечно и «косяки» моей темы. Вечером еще из дома посмотрю в разных браузерах. Сейчас это я из хрома смотрю.

    • Ответить

      Можно проверить — Вы деактивируйте его — и если всё станет нормально — значит, конфликт или несовместимость с темой...

      Так же и у меня — все рамки вылезли...

      • Галина, я понял из-за чего идет конфликт, поэтому вечером буду исправлять сей косяк.

    • Привет, Антон. Спасибо! Я сейчас зашел к тебе и посмотрел как отображается плагин. Я поменял в чем ошибка и где идет несовместимость плагина с темой. Сегодня вечером выпущу версию 1.1, где все исправлю! Поэтому заходи вечером и скачивай — все будет нормально 🙂

      • Ответить

        Костя, теперь все в порядке. Установил версию 1.1, все отображается корректно. Посмотри ту же статью у меня на блоге «Как сделать электронную книгу». Спасибо еще раз, буду использовать в оформлении.

    • Ответить

      Антон, прикольно, только, что-то блоков не видно, на что смотреть?

      • Ответить

        Я пока временно деактивировал плагин. Жду, когда Костя его доделает 🙂

        • Ответить

          Ага, теперь ясно:)

  17. Ответить

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

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

    Сейчас с удовольствием опробую твой плагин! И поздравляю тебя!

    • Спасибо, Анна.

      • Ответить

        Спасибо тебе большое!!!!!

  18. Круто! Плагин забрал)) Спасибо за разработку и возможность бесплатного скачивания)))

    • Не за что, Алексей! Не забудьте только потом поделиться впечатлениями 🙂

  19. Ответить

    Я так понимаю, что настраивать всеравно возможно — ведь картинки можно заменить на свои, да и стили также можно подправить в исходниках под себя.

    Молодцом!

    • Ответить

      Можно конечно если осторожно.

  20. Ответить

    Молодец, Костя! Поздравляю тебя с разработкой твоего плагина, надеюсь это не последний твой плагин! Заинтересовал, надо будет попробовать у себя установить.

    • Ответить

      Елена, дерзайте сразу. Это очень быстро делается. Я, подтвердив своё желание поставить плагин, получил от него ссылку на скачивание через 5 минут. А ещё через 10 минут плагин уже работал в обоих моих блогах.

      Не откладывайте. Иначе появятся другие задачи и проблемы, пройдёт 2-3 дня и вы о нём забудете.

      Успехов в установке!

      • Ответить

        Полностью дед Виталя согласен очень быстро и удобно. Константин спасибо ещё раз.

  21. Ответить

    У меня та же несовместимость, выдает вот такую ошибку: Warning: call_user_func_array () expects parameter 1 to be a valid callback, class 'wpboxes' does not have a method 'redirect' in /home/genka/public_html/wp-includes/plugin.php on line 470

  22. Ответить

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

  23. Ответить

    Костя, молодчина, ща буду устанавливать твой плагин, все его так хвастают.

  24. Ответить

    Интересный плагин! Нужно будет протестировать.

    Костя, у меня ещё вот вопрос не по теме:

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

    • Я никогда не тренировался программами и прочем. У меня была как-то книга по быстропечатанию на компьютере, но и она мне не помогла. Пока я не стал просто писать ОЧЕНЬ много статей и прочего текстового контента. Просто писал, писал и вместе с этим приходил опыт. Сейчас даже на клавиатуру смотреть не приходится 🙂

  25. Ответить

    А что Костя уже исправил плагин?

    • Еще нет.

      • Ответить

        Костя, ели что дай знать окей?

  26. Ответить

    Свой плагин это классно! Оформление и вправду неплохое! Молодец! =)

  27. Ответить

    Константин, плагин скачала — интересно посмотреть на практике, как он у меня будет работать. Поздравляю с первым плагином! Вроде бы просто, но со вкусом. Мне нравится. Попробую, напишу отзыв)

  28. Ну, что тут сказать, Костя, ты супер. Уже скачала твой плагин, сейчас пробовать пойду и другим о нём расскажу. Вот завтра новый пост на блоге выложу и в новостях к нему поделюсь своими впечатлениями по твоему шедевру. Костя, знаешь, хорошо бы ещё блог для новостей сделать отдельный. Ну, знаешь, ведь в конце поста многие блоггеры ставят заголовок «новости» и пишут там несколько пунктиков, что новог в жизни случилось, у кого какой конкурс начался и т.д. Вот под этакий раздельчик хорошо бы тоже что-то в твоём плагине предусмотреть, как считаешь?

  29. Систему сильно нагружает плагин?

    • Практически не нагружает! Можете проверить и отписаться потом здесь.

  30. Вышла новая версия плагина - WP-Boxes CSS 1.0.1.

    — Уменьшен вес плагина с 171 кб до 33 кб.

    — Исправлена несовместимость с некоторыми темами.

    — Уменьшено количество запросов к БД.

    Ссылку на скачивание автоматически выслал всем, кто скачал плагин ранее!

    • Ответить

      Жаль Костя, но у меня плагин не идет, я уже 4 раза скачивал...

      • Ответить

        Вот она болезнь самопальных шаблонов. Генадий а в чем или как именно он не идет с вашей темой? Может попробуем помочь разобраться?

      • Ответить

        Я побоялась по-второму разу волноваться...

        Как-то подожду!

    • Ответить

      Спасибо за облегчённую версию плагина, Костя!

      Хотя у меня в блогах и в первой плагин работал отлично

    • Ответить

      Костя, только что поставил твою новую версию плагина — WP-Boxes CSS 1.0.1.

      Установилась как и первая — легко, но...

      Исчели из цветных блоков значки «!», «?», «+» и «\/» . Завтра ещё «погоняю» плагин на втором блоге, посмотрю, и если ничего не изменится, вернусь пока к первой версии, которая с темой не конфликтовала.

      У меня тема — «Panoramica».

      • Ответить

        Костя, моя паника оказалась ложной. Сегодня зашёл с утра на свой второй блог «Бегом к здоровью», проверил улучшенную твою версию в новой статье — всё ОК! Перешёл и на этот блог (с которым участвую в блогомарафоне) — а здесь тоже всё нормально.

        Наверное, вчера какой-то глюк был 🙁

        Извини, и ещё раз большое спасибо!

    • Ответить

      Спасибо Константин всё работает отлично!

  31. Поздравляю, Кость с первым плагином! Значит ты в программисты подался 🙂

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

  32. Ответить

    Приглашаю на мини-конкурс «Интересная тема для поста».

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

    Креативщики — ау-уууу!

    • Ответить

      Уже побежали, Галина. Для затравки одну идею разместил, ещё десяток пока вынашиваю.

      ЗЫФ. А новую версию плагинчика попробовали бы. Рисковать-то особенно нечем. У Вас первая не пошла, а у меня, наоборот, вторая. Мобыт у Вас вторая сразу приживётся.

      Если чо — поможем 😉

  33. Ответить

    Костя поздравляю созданием собственного плагина. Хотелось бы статейку почитать, как создать собственный плагин)

  34. Ответить

    Ах как жаль что у меня тоже выдаёт ошибку при активации плагина —

    Fatal error: Cannot redeclare render_notes () (previously declared in /home/httpd/vhosts/igorchernomoretz.com/httpdocs/wp-content/plugins/wp-note/wp-note.php:28) in /home/httpd/vhosts/igorchernomoretz.com/httpdocs/wp-content/plugins/wp-boxes-css/wp-boxes-css.php on line 39

    А так хотелось попробовать!!!!!!!!!!!!!!!!!!!!!!!

    • Ответить

      Извини, но это я балбес!!! Ведь я не удалил плагин wp-note перед тем как активировать твой! Короче всё работает на ура, большое спасибо тебе, но... что делать со всеми старыми статьями? Это придётся во всех менять такие выделения? Уффф какая морока сейчас предстоит!

      • Ответить

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

        • Ответить

          Вот это будет супер! Буду ждать, спасибо!

        • Ответить

          Да буду ждать только не забудь сообщить.

  35. Классный плагин, иной раз сам думал о таком, красиво смотрится и привлекает внимание

  36. Ответить

    Спасибо за статью!

  37. Ответить

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

  38. Ответить

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

  39. Ответить

    Спасибо, Константин! Установила и очень довольна, я прописывала вручную у себя, а сейчас просто красотища!

    • Ответить

      Все легко и просто если рядом есть Хороший наставник

  40. Блин. А куда делся плагин. Он буквально сегодня понадобился. Пришлось использовать аналог.

  41. Ответить

    Круто очень, молодец )

  42. Плагин просто супер, как теперь избавиться от его постоянного исползования? 🙂

    • Ответить

      Но ведь плагин временно не распространяется, почему не знаешь Виталик?

  43. Ответить

    Здоровский плагин! Я тоже себе такой хочу, сколько раз говорила уже, нужен плагин, чтобы красиво текст выделял разными цветами, разными картинка, если это вопрос, то вопрос картинки, если что-то важное, что воскл.знак.

    Костя, когда ты снова начнешь распространять свой плагин?)

  44. Ответить

    Диана, а Вы не говорите а установите если желаете. Ведь красиво выделенный текст будет приятен для посетителей

    • Ответить

      Вот — вот, Иван, я установила бы, но раздача плагина пока завершена. Интересно узнать почему, может обновляет.)) Это было бы здорово, если честно. Я Косте доверяю, отзывы хорошие в комментариях, хочу именно его плагин!

      • Ответить

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

  45. Ответить

    Молодец Константин,так держать.Не важно что много таких плагинов,главное что сам создал.

    Симпатичный дизайн.

  46. Ответить

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

  47. Отлично создать свои плагин для вордпресс хотел бы у вас скачать