Полный рассказ о том, почему я решил создать CMS, структуру, SEO, админ-панель, темы и многое другое.
С годами мой веб-сайт становился все более и более устаревшим, и в нем отсутствовали многие важные функции, включая самые основные функции SEO. Хотя в последнее время я много писал, в целом на моем веб-сайте я размещал меньше контента, потому что он больше не соответствовал моим требованиям.
Поэтому я решил провести заслуженную модернизацию своего сайта. Вместо того, чтобы добавлять новые функции в старый код, я начал в основном с нуля. Какое-то время я обдумывал идею создания собственной системы управления контентом, и теперь мне показалось, что это хорошая возможность принять вызов.
В этой истории я хочу рассказать о причинах, по которым я решил создать свою собственную CMS, и рассказать о некоторых дизайнерских решениях и деталях реализации.
Мотивация
Когда я создавал предыдущую версию своего веб-сайта, мне в основном хотелось чем-то заполнить основной домен, поэтому я создал простой блог-сайт. У него был статичный дизайн, но уже можно было создавать и редактировать сообщения блога в панели администратора. В то время я мало знал о SEO, но это не имело особого значения, потому что я не использовал свой веб-сайт для чего-то важного.
Несколько месяцев спустя, когда я стал более серьезно относиться к разработке инди-игр, я подумал, что было бы неплохо писать в блоге регулярные сообщения о моем прогрессе. Я писал по одному посту в неделю, и никто их не читал. Однако, когда я начал заниматься другими темами и стал более активным в социальных сетях, стало очевидно, что моему сайту потребуются некоторые возможности SEO.
SEO
Основной причиной, по которой я решил начать с нуля и разработать систему управления контентом, были URL-адреса. В старой версии для навигации использовались переменные GET. Они отлично работают, их легко и эффективно реализовать. Однако они не оптимизированы для поисковых систем.
Поисковые системы предпочитают короткие и удобочитаемые URL-адреса с ключевыми словами. Поэтому я переключился со старого стиля https://pingpoli.de?s=blogpost&bpid=60 на более профессиональный и удобный для поисковых систем вариант https://pingpoli.de/gamedev-52-viking-map.
Еще одна особенность, которой полностью не хватало в старой версии, - это метатеги SEO. У веб-сайта был единый заголовок, который оставался неизменным для каждой страницы, и вообще не было тега описания.
Поскольку изменение URL-адресов и добавление поддержки заголовков и описаний SEO потребовало бы более серьезных структурных изменений в коде, казалось, что проще разработать все с нуля и с самого начала внедрить лучшую структуру.
Основная структура
На фундаментальном уровне каждый веб-сайт представляет собой набор страниц. Поэтому я начал с общей концепции страницы, которая разбивается на более специализированные подстраницы. Страница управляет несколькими настройками, одинаковыми для всех типов страниц. Это включает заголовок, описание SEO, а также то, является ли страница общедоступной или нет. У каждой страницы также есть URL-адрес, который служит индексом в базе данных, поэтому индексный файл может выбрать правильную страницу в зависимости от URL-адреса.
Хотя некоторые настройки важны для каждой страницы, было бы невозможно создать только один тип страницы, который мог бы обрабатывать все. Поэтому я добавил три типа подстраниц: статические страницы, сообщения и модули.
Статические страницы - самые простые. Они содержат только статический контент. По большей части тексты и изображения. Они создаются один раз и не меняются очень часто.
Сообщения такие же, как и сообщения в блогах. Кроме того, они в основном содержат статический контент и практически не меняются после первоначального создания. Однако у них также есть несколько дополнительных параметров: заголовок, описание / подзаголовок, автор, дата публикации, маленькая и большая миниатюра и теги. Также можно включить комментарии пользователей под сообщениями.
Третий и самый сложный тип страницы - это модуль. Они используются не только для статического контента, но и для других плагинов WordPress. Например, контактная форма на моем веб-сайте и список сообщений с несколькими страницами являются модулями.
В отличие от статических страниц и сообщений, для правильной работы модулей требуется некоторый PHP-код, поэтому они должны быть написаны извне, а затем могут быть установлены на веб-сайте. Чтобы обеспечить возможность настройки на лету, модули также имеют два текстовых поля, которые можно редактировать в панели администратора, а тексты включены выше и ниже самого модуля. Например, на странице контактов модулем являются только элементы формы, в то время как текст выше и реклама ниже включаются через настраиваемый текст, поэтому их можно легко изменить.
Когда я искал способ динамической загрузки различных модулей, я обнаружил очень приятную функцию PHP, о которой раньше не знал. Можно создать экземпляр класса из имени переменной следующим образом:
<?php $className = “Test”; $obj = new $className; ?>
Это означает, что можно загружать имя модуля из базы данных и динамически вызывать его код. Это также означает, что я могу разработать другой модуль, загрузить его, и он будет работать без каких-либо других изменений исходного кода.
Панель администратора
После реализации первоначальной структуры системы управления контентом я много внимания уделял админке. На самом деле, я, наверное, трачу больше времени на разработку и внедрение админ-панели, чем на все остальные задачи вместе взятые. Я хотел иметь возможность контролировать все на веб-сайте из панели администратора без необходимости использовать другой инструмент, такой как PHPMyAdmin, для настройки переменных базы данных.
Ссылки для навигации
Возможность динамического добавления страниц означала, что мне также нужно было настраивать ссылки в области навигации веб-сайта. Область навигационных ссылок в админке получилась очень красивой. Я добавил кнопки быстрых ссылок для всех трех типов страниц, что позволяет очень быстро и легко добавить новую ссылку для навигации. Также можно делать ссылки на внешние страницы, динамически отображать или скрывать ссылки, изменять их порядок и удалять их.
редактор
Редактор - одна из областей, которая меня не совсем устраивает. Он имеет BB-коды для наиболее важных элементов стиля и позволяет вставлять изображения, списки или видео YouTube. Я пользуюсь BB-кодами много лет и могу эффективно ими пользоваться. Однако по сравнению с современным и динамичным редактором, таким как редактор Medium, он кажется немного устаревшим. Я, вероятно, в ближайшем будущем собираюсь разработать лучший редактор для своего веб-сайта.
Другие варианты
Помимо параметров страницы, есть также множество настроек для всего сайта. Во-первых, я добавил кнопку для переключения видимости веб-сайта в целом. Если вы хотите выполнить обслуживание или интегрировать обновления, вы можете использовать кнопку, чтобы сделать веб-сайт частным на некоторое время. У администраторов также есть возможность переопределить все скрытые страницы, чтобы вы могли предварительно просмотреть страницу перед тем, как сделать ее общедоступной.
Поскольку каждая тема для веб-сайта будет иметь нижний текст и область для отображения ссылок на социальные сети, я также добавил для них редактируемые текстовые поля. Наконец, есть возможность включить Сорока, мой собственный инструмент веб-аналитики, и Google AdSense для размещения рекламы на сайте.
Список рассылки
Когда вы смотрите на крупных писателей, создателей контента и веб-сайты, у многих из них есть списки рассылки. Даже на моем старом веб-сайте была система уведомлений по электронной почте, когда я публиковал новое сообщение в блоге.
Так что было разумно включить список рассылки и на мой новый веб-сайт. Я смог взять большую часть основных функций из своего старого кода и добавил несколько новых функций администратора. В старой версии не было возможности писать настоящие информационные бюллетени, электронное письмо автоматически генерировалось только при публикации нового сообщения в блоге. В новой версии я хотел иметь возможность писать более личный информационный бюллетень вместо обычного «Эй! Опубликована новая запись ”.
Я знаю, что другие люди используют такие компании, как ConvertKit, для своих списков рассылки, и это даже бесплатно для небольших учетных записей. Но, как всегда, я предпочитаю создавать индивидуальное решение, которое лучше интегрируется в мой веб-сайт.
Специальные команды
Одна из моих любимых функций новой системы управления контентом - специальные команды. Это способ динамически вставлять контент в текст. Допустим, вы пишете новую запись в блоге и хотите сослаться на другую публикацию. Вы можете использовать обычную ссылку, но она не привлекает внимания. С помощью моих специальных команд можно вставить небольшой или большой превью сообщения, которое включает изображение, заголовок и подзаголовок этого сообщения. В частности, на изображения чаще нажимают, поэтому они не только выглядят лучше, но также увеличивают вероятность того, что кто-то нажмет на указанную публикацию.
Я написал простой парсер для обработки специальных команд. Шаблон всегда ### command ### и есть несколько принятых команд. Как уже упоминалось, вы можете добавлять превью к другим сообщениям, но есть также команды для вставки формы подписки в мой список рассылки, объявления Google AdSense или кнопки пожертвования PayPal.
Пока специальная обработка команд происходит в основном классе CMS, и добавление новой команды потребует изменения этого класса. Однако у меня есть идея, как добавить динамические расширения к специальным командам. Подобно модулям, вы могли бы добавить файл с новой специальной командой, которую затем можно было бы использовать везде. Как только я встречу новую специальную команду, которую хочу добавить, я собираюсь реализовать эту новую систему, чтобы сделать ее еще более полезной.
Темы
Изначально я хотел только добавить функции управления контентом и интегрировать их в существующий дизайн веб-сайта с некоторыми незначительными изменениями дизайна. Однако я понял, что добавление тем, похожих на WordPress, не потребует много дополнительной работы, поэтому я пошел дальше и сделал это.
Дизайн сайта полностью контролируется в файлах темы. Они состоят в основном из HTML и CSS и требуют только минимального кода PHP для вставки содержимого в правильные позиции. Это означает, что дизайнеры могут создавать дизайн, не беспокоясь о коде. Функциональность и дизайн в основном разделены, что дает множество преимуществ с точки зрения возможности обновления и обслуживания.
Помимо преобразования старого дизайна веб-сайта в тему и создания другой темы для новой версии, я еще не тестировал другие дизайны. Я уверен, что есть некоторые безумные конструкции, которые были бы невозможны с текущей системой, но я всегда могу добавить больше функций, когда найду что-то, что не работает.
Мета-теги социальных сетей
Твиты и другие сообщения в социальных сетях, содержащие изображения, с большей вероятностью получат лайк и на них будут нажимать. Несколько лет назад на крупных платформах социальных сетей появились специальные метатеги HTML, которые сообщают своим анализаторам, как интерпретировать контент на связанной странице. Когда вы или кто-то другой публикуете ссылку на ваш веб-сайт в социальных сетях и на нем есть теги социальных сетей, сообщение будет автоматически сформировано и будет включать изображение, заголовок и описание. Он выглядит лучше, профессиональнее, а также увеличивает вероятность кликов, при этом его легко и быстро добавить на веб-сайт, поэтому нет причин не включать эти метатеги.
Использует
К сожалению, моя система управления контентом будет иметь очень ограниченные варианты использования. Сейчас я использую его только для своего личного веб-сайта, и я не вижу много возможностей использовать его для других проектов в ближайшем будущем.
Одна из моих целей на 2021 год - стать фрилансером. Допустим, я нашел клиента, который хочет разработать веб-сайт. К сожалению, использовать мою CMS в проекте клиента не имеет смысла. Если в будущем над этим веб-сайтом будет работать другой разработчик, он не будет знать, как использовать мою CMS, не будет никаких руководств в Интернете, и они не будут знать, как разрабатывать модули или темы.
Хотя я очень доволен тем, как получилась моя CMS, я знаю, что она не идеальна. Конечно, остались некоторые ошибки, и, вероятно, можно было бы использовать несколько дополнительных функций. Пока я единственный, кто его использует, я могу исправлять ошибки и добавлять функции, когда мне нужно. Однако, когда он работает на других серверах, поддерживать его повсюду - это большая дополнительная работа.
Это означает, что он, вероятно, будет использоваться только для моих веб-сайтов и, возможно, для друзей и членов семьи, если они захотят его использовать. Для работы фрилансером, вероятно, имеет смысл придерживаться WordPress и других популярных CMS, что гораздо менее увлекательно, но хорошо известно и широко используется.
Вывод
Стоит ли внедрять собственную CMS? Как и почти во всем остальном, ответ - «в зависимости от обстоятельств». Чисто с экономической точки зрения не стоит. Использование WordPress или другой существующей CMS быстрее, имеет лучшую поддержку и больше руководств, хорошо известно и широко используется в отрасли.
Тем не менее, я по-прежнему считаю, что создание системы управления контентом - это здорово. Во-первых, всегда лучше использовать свою собственную систему. У вас будет больше мотивации использовать его и реализовать дополнительные функции. Вы также точно знаете, как это работает, поэтому можете быстро устранять проблемы и устранять их самостоятельно.
Наконец, это интересная задача, и вы можете многому научиться на ней. Он охватывает практически все аспекты веб-разработки, от тяжелой базы данных до функциональных и динамических административных панелей до хорошо продуманного внешнего интерфейса.
Я рад, что реализовал собственную CMS, и доволен тем, что получилось. Он не только лучше и имеет больше функций, чем мой старый веб-сайт, но также упрощает будущие обновления за счет использования модулей, а когда мне наскучит текущий дизайн, я могу легко создать новую тему и изменить ее одним щелчком мыши. кнопки.
Первоначально опубликовано на https://pingpoli.de.
