Личная страница пользователя. Как сделать страницу пользователя
Привет всем, я давно не публиковал новых статей, так как было очень много различной работы + ко всему, я проходил несколько курсов на тему создания сайтов. Сейчас, я думаю, я буду чаще публиковать различные интересные заметки для вебмастеров.
Почну, пожалуй, с полезных плагинов WordPress, которые мне действительно пригодились на практике.
Сегодня я расскажу о плагине Client Portal — Private user pages and login.
Для чего он мне понадобился?Примерно месяц назад я разрабатывал сайт для школы изучения иностранных языков. Среди заданий по верстке, и функционала было задание создать личные страницы для всех учеников школы и при этом их должно быть удобно, наполнять для неопытного редактора. Конечно же сначала я начал искать плагины для создания личного кабинета для пользователя, но все они были слишком громоздки и имели огромный функционал, который попросту был не нужен и только делал сайт тяжелее. Во время поисков я попал на страницу плагина Client Portal — Private user pages and login и понял, что это то, что нужно. Легкий плагин, который позволяет создавать личные странице под каждого пользователя.
После установки данного плагина, в админке в разделе «Пользователи», при наведении на любого из пользователей у вас появиться ссылка на личную страницу. Как это выглядит я показал на скриншоте.
При нажатии на нее вы увидите обыкновенный редактор. В моем случае редактор сайта публиковал туда расписание уроков для каждого ученика и небольшие организационные объявления.
Как правильно подключить?Скачав и установив плагин Client Portal — Private user pages and login. Вам нужно будет как то его привязать к пользователю, чтобы после того как он войдет на сайт, попадал именно на свою личную страницу.
Для начала нужно создать страницу с названием например «Личный кабинет». После чего скопировать туда шорткод — .
Для перенаправления я использовал плагин — Theme My Login. Как видим из скриншота ниже, я указал ссылку на редирект пользователя на нужную нам директорию.
Вот такими двумя плагинами мне удалось решить поставленную задачу и при этом, я не ставил громоздких личных кабинетов, которые только бы запутывали администратора сайта.
На этом сегодня все, надеюсь, этот материал будет кому-то полезен.
Время от времени ко мне приходят вопросы с просьбой рассказать, как сделать страницу пользователя , то есть чтобы каждый зарегистрированный посетитель имел свою собственную страницу на сайте. В этой статье я постараюсь ответить на этот вопрос.
Первым делом, Вам необходимо сделать авторизацию . Если не знаете, как это сделать, то читайте это: . После авторизации у каждого пользователя сохраняется в сессии информация о его логине и пароле. Теперь можно заняться страницей пользователя , итак, алгоритм следующий:
Всё, теперь все авторизованные пользователи, заходящие на user.php будут видеть свои собственные данные. Что это за данные (ФИО, аватарка, дата рождения и тому подобное) не имеет никакого значения, то есть мы создали самую обычную страницу пользователя .
Что такое личные страницы и записи в WordPress многие кажется знают или слышали об этом, но возможно не многие использовали из-за того, что не находили применения для них. Сегодня я расскажу, как можно использовать такие страницы с большой пользой для себя и своего сайта.
Итак, давайте для начала уточним, что собой представляют личные страницы и записи в WordPress . Статус «личная» говорит о том, что доступ к содержимому конкретной страницы будет иметь только тот, кто создал страницу или запись, ну и конечно же администратор и супер-администратор сайта или блога. Так какая же польза от личных страниц и записей?
Ну, скажем в личной записи можно оставлять какие-то заметки, тексты, ссылки, фотографии и прочее для себя на память и так далее. Но пользы от этого не так уж и много. А вот личная страница - это уже совсем другое дело, так как для страниц можно создавать и использовать особые шаблоны. Вот об этом, о личных страницах, мы и поговорим.
Для того, чтобы создать личную страницу, нужно войти в панель управления сайтом (в дальнейшем будем подразумевать, что Вы вошли как Администратор), в блоке меню слева выбрать «Страницы» -> «Добавить новую». Откроется форма создания страницы. После ввода заголовка страницы ниже появится ссылка на нее. Изначально созданная страница может иметь такой адрес:
Http://wpmytest.ru/?page_id=4
что не очень-то запоминается, поэтому лучше сделать более понятную ссылку, например такую (если у Вас выбрано «Название записи» в разделе настроек «Параметры» -> «Настройки постоянных ссылок»):
Http://wpmytest.ru/moya-laboratoriya/
В поле содержимого страницы заносим какую угодно информацию, любой текст, и в общем страница готова. Но теперь важно придать ей статус «личное». Для этого в правом блоке панели управления находим блок «Видимость: Открыто Изменить» и, кликнув по ссылке «Изменить», выбираем в появившемся списке «Личное» и нажимаем кнопку «OK». Затем смело жмем кнопку «Опубликовать», и можно считать, что личная страница создана.
Чтобы убедиться, что новая страница доступна только Вам, сделайте выход из своего аккаунта и попробуйте открыть в браузере личную страницу по адресу, который Вы ей присвоили. Как правило, Вы получите сообщение о том, что такая страница не существует, либо о том, что у Вас нет доступа к данной странице. Вот все, но это только половина дела, а самое интересное впереди.
Кстати, можно еще на всякий случай добавить строчку в файл robots.txt для запрета сканирования личной страницы (в моем примере это каталог /moya-laboratoriya/) ботами поисковых систем:
Disallow: /moya-laboratoriya/
Идем дальше...
Как я уже говорил в начале этой статьи, для любой из страниц можно использовать разные шаблоны. Во многих темах, даже в стандартных, которые поставляются в пакете самого WordPress, может присутствовать парочка шаблонов оформления именно для страниц. Для данного примера я использовал стандартную тему «Twenty Eleven», в которой для страницы можно выбрать следующие шаблоны:
Базовый шаблон
- Showcase Template
- Sidebar Template
Чтобы назначить шаблон для страницы, нужно выбрать созданную Вами страницу для изменения, в правом блоке панели управления найти «Атрибуты страницы» -> «Шаблон» и там выбрать нужный.
Но нам возможно не очень интересны готовые шаблоны, в которых много лишнего, и мы создадим свой.
Чтобы создать свой шаблон для страницы, нужно всего лишь войти в каталог, где находятся файлы темы, которая используется на сайте в настоящий момент, и там создать новый PHP-файл. По личному опыту скажу, что все же лучше сделать копию одного из файлов, находящихся там и немного изменить его код. Для примера я использовал стандартную тему «Twenty Eleven» и копию файла «showcase.php», которую переименовал в «showcase-2.php», а затем выбросил все ненужное мне из его кода. В итоге получилось вот что:
Обратите внимание, что в коде файла присутствует строка «Template Name: Мой шаблон 1». Это очень важно, так как только наличие метки «Template Name» позволит нам при изменении параметров нашей страницы, при выборе шаблона уже увидеть в списке шаблон с именем «Мой шаблон 1».
Так как новый шаблон нами уже создан, остается назначить его для нашей личной страницы. Снова выбираем созданную Вами страницу для изменения, в правом блоке панели управления найти «Атрибуты страницы» -> «Шаблон» и там уже из списка выбираем появившийся, созданный нами «Мой шаблон 1»:
Мой шаблон 1
Сохраняем изменения и открываем для проверки нашу личную страницу. Теперь уже на странице будет присутствовать верхняя часть (шапка), нижняя часть (подвал) и содержимое самой страницы (если Вы конечно добавляли какой-нибудь текст или что-то еще при ее редактировании). И больше ничего лишнего!
Ну и что тут особенного? - спросите Вы. Да дело в том, что теперь именно в код созданного нами шаблона страницы можно добавлять все, что душа пожелает. Например php-коды, которые нельзя было вставить в само содержимое страницы из панели управления. Например скрипты сбора статистики с SEO-ресурсов, статистики посещений сайта и многие другие. И это делать тоже будет не сложно и без FTP-доступа к сайту, так как вызвать файл шаблона личной страницы на редактирование можно через панель управления сайтом: «Внешний вид» -> «Редактор» и справа «Шаблон страницы «Мой шаблон 1» (showcase-2.php)»
Новый шаблон доступен в редакторе WordPress
Теперь Вы наверно заметили, что не совсем удобно для просмотра личной страницы всегда заходить в панель управления и там искать эту страницу. Надо что-то предпринять.
Мы ведь в начале создания личной страницы назначали для нее ссылку, так давайте ее и будем использовать. Хотя даже и ссылку можно случайно забыть, особенно если она была сложной. Но упростить доступ к странице оказывается просто.
В любое место вашего шаблона (в один из файлов шаблона, например в файл, отображающий боковую панель) Вы можете добавить ссылку на Вашу личную страницу, но чтобы ссылка не была видна ни поисковым системам, ни кому-либо другому, нужно добавить условие, которое будет разрешать доступ только администратору сайта:
Однако некоторым возможно захочется на всякий случай еще больше защититься от прямого доступа посторонних или других аккаунтов сайта к содержимому Вашей личной страницы. Для этого в файл, который Вы создавали как шаблон для личной страницы, нужно добавить похожую проверку, как делали для скрытия ссылки:
Таким образом к содержимому страницы будет иметь доступ только администрантор, даже если Вы случайно сняли статус "Личное" для этой страницы.
Ну и напоследок еще раз напомню, что в сам файл шаблона можно добавлять любой код, включая PHP-скрипты и любую другую информацию, которая никак не будет доступна поисковикам и посторонним. Кроме того, коды добавленные в файл шаблона личной страницы никоим образом не будет влиять на производительность сайта, кроме возможно тех случаев, когда Вы сами будете обращаться к этой странице.
Например можно добавить небольшой виджет сайта pr-cy.ru, который буде показывать актуальные даты последних апов PR и тИЦ
Вот таким образом может выглядеть исходный код шаблона Вашей личной страницы:
Добавленные скрипты в шаблон личной страницы никак не повлияют на работу вашего сайта или блога. Будь то скрипты JavaScript, PHP или другие, за исключением конечно того, что если Вы использовали скрипты для записей в базу данных. В общем можно спокойно тестировать свои новые скрипты и проводить прочие эксперименты. Но если Вы вдруг допустили ошибку в коде созданного Вами шаблона страницы и не знаете как решить проблему (например вместо вашей личной страницы Вы видите пустое окно или вывод об ошибке), то этот файл шаблона можно попросту удалить или в настройках страницы просто выбрать другой шаблон (например шаблон по умолчанию).
Вот собственно и все. На последнем скриншоте показана часть моей личной страницы на WordPress (числа на счетчиках фиктивные и большая часть результатов работы скриптов скрыта, так как информация у меня на личной странице конфиденциальная), привожу как пример использования личной страницы с собственным шаблоном для нее:
Удачного и полезного Вам использования личных страниц на WordPress!
2015-09-15 13231 33 Денис Абдуллин
В чистом виде как на Урааа выкладывать что-либо редко получается ибо все сделано в единой системе, а пользователям следует предложить что-то универсальное . Разумеется, при любом раскладе возникнут вопросы и проблемы. Этот дизайн сделан для светлого фона, поэтому придется многое переделать «под себя». Впрочем, я постарался сделать что-то более универсальное и легко устанавливаемое.
Вот она персональная страница для uCoz как на Урааа . Не говорю, что придумал что-то оригинальное, просто делюсь современным стилем для персональной страницы. Нельзя не заметить, что круглые аватары по центру – некий тренд в мире интерфейсов.
Как сделать персональную страницу такой же,как другие страницы сайта?
Этот вопрос, скорее всего, сформулирован не точно, не полно, но следует начать с него. Персональная страница на uCoz по умолчанию совершенно самостоятельная и маленькая, как будто бы она не часть сайта, а что-то ненужное. Тоже самое и с некоторыми другими страницами, такими как личные сообщения , но не будем о них сейчас. Итак как же сделать «персоналку» действительно частью шаблона.
Во-первых, выберете открытие «В текущем окне» персональной страницы в настройках модуля «Пользователя».
Во-вторых, скопируйте код каркаса в «Управление дизайном – Страницы сайта».
Теперь полностью замените код в «Управление дизайном – Пользователи – Персональная страница» на тот, что вы взяли из «Страниц сайта». В нем замените $CONTENT$ на первоначальное содержимое персональной страницы между и . Вы можете сразу заменить $CONTENT$ на код персональной страницы от Урааа (ниже).
Вот, что у нас получилось:
Персональная страница как на Урааа
Следующий код используйте в «Управление дизайном – Пользователи – Персональная страница». Замените $CONTENT$ на данный код по инструкции выше:
200?"200px":""+(this.scrollHeight+5)+"px");">
if (window.name.length>2){window.resizeTo(750,420);}
function uSocialConnect(obj){
var social = obj.id.split("-");
obj = $(obj);
if(obj.hasClass("is-connected")){
if(confirm("Вы действительно желаете отключить аккаунт?")){
obj.addClass("wait");
_uPostForm("",{type:"POST",url:"/index/sub/", data:{a:4,s:social}});
}
}else if(!obj.hasClass("wait")){
uSocialLogin(social);
}
return false;
}
.social-accounts { padding:10px 0 3px }
.social-accounts a { opacity:.4 }
.social-accounts .is-connected { opacity:1!important }
.social-accounts .wait i { background:url(/.s/img/icon/ajsml.gif) no-repeat center center!important }
.social-accounts a.cursor-default, .social-accounts a.cursor-default i { cursor:default!important }
.statusOffline {color:#979797}
.statusOnline {color:#5ac92e}
Sc-over {padding:0px 20px}
.sc-cover {background:url("https://wallpaperscraft.com/image/spots_background_light_blur_68629_1920x1080.jpg") #1d1d1d;background-size:cover;position:relative;height:180px;margin-bottom:60px}
.sc-cover-in {width:100%;position:absolute;left:0px;bottom:-50px;}
.sc-avatar {width:100px;height:100px;margin:0px auto}
.sc-avatar {border:4px solid #fff}
.sc-avatar img {width:100px;height:100px;object-fit:cover}
.sc-avatar, .sc-avatar img {-webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;}
.sc-top {text-align:right;padding:15px 0px;position:absolute;bottom:-50px;left:20px;right:20px;z-index:2}
.sc-group {float:left}
.sc-name {font-size:19px}
.sc-city {font-size:13px;color:#959595}
.sc-counter, .sc-counter:hover {display:inline-block;font-size:21px;padding:15px 7px;color:#000;text-decoration:none}
.sc-counter span {display:block;font-size:13px;}
.sc-tabs {max-width:420px;text-align:left;font-size:14px;border-bottom:1px solid rgba(0,0,0,0.1);padding-bottom:7px;margin:7px auto}
.sc-tabs div {float:left;width:110px;color:#959595}
.sc-bottom, .sc-button {padding:10px 0px}
.sc-button a, .sc-button a:hover {padding:7px 14px;font-size:13px;border:2px solid #3785dc;color:#3785dc;text-decoration:none;display:inline-block;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;}