Меняющаяся пользователем ширина сайдбара

@denismix · Регистрация: 03.10.2014

Author24 — интернет-сервис помощи студентам

Всем привет!

Если вкратце.
Ищу решение, которое бы позволило встроить в Вордпресс сайдбар (или что то подобное), куда можно разместить фрейм.
Важный момент: ширина сайдбара обязательно должна меняться пользователем передвижением границы, нужна адаптация под смартфоны и вообще кроссбраузерность и мультиплатформенность.

Немного подробнее.
Есть сайт https://s-art.pro
в левой колонке Редактор HTML/JS приложение не WP,
в правой колонке Блог WP.

Его "колонки" сейчас реализованы при помощи вот такой конструкции:

HTML5

<frameset cols="500px,*" rows="100vh" border="10" bordercolor="maroon" frameborder="1" frameborder="yes" onchange="(innerWidth < 600) && (frameset.rows = frameset.cols, frameset.cols = '')">
  <frame src="https://s-art.pro/Sart_test/Sart_center.html" name="frame1">
  <frame src="https://blog.s-art.pro" name="frame2">
</frameset>

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

Но. Как обычно есть это проклятое "но"...
Яндексы, Фейсбуки, Твиттеры и т.д. не распознают картинки и другие важные для CEO-раскрутки теги внутри фреймсет фреймов (меня особенно волнует правая колонка - блог)

Сейчас, как временное решение, даю ссылки на Блог, а он перенаправляет JS кодом на страницу с <frameset..>, но поисковые системы воспринимают это как злостное хулиганство и скорее всего вообще забанят сайт, чего хотелось бы избежать...

@Lazor · 12.01.2021, 14:21

Сообщение от denismix

разместить фрейм.
...
Яндексы, Фейсбуки, Твиттеры и т.д. не распознают картинки и другие важные для CEO-раскрутки теги внутри фреймсет фреймов (меня особенно волнует правая колонка - блог)

Так тебе шашечки или ехать? (анек)

Что именно тебе надо решить? Для чего эти извращения с фреймами?

@denismix · 12.01.2021, 14:43 **[ТС]**

Сообщение от Lazor

Что именно тебе надо решить? Для чего эти извращения с фреймами?

Сейчас в фреймах обе части сайта - поисковики не видят и не индексируют Блог,
кроме того в Блоге есть "опасный" JS перебрасывающий на страницу с фреймсет, т.к. она главная и пользователи должны видеть именно такую компановку сайта.

Если внутри фрейма будет только Редактор (левая колонка), а Блог станет Главной страницей сайта содержащей в себе фрейм с Редактором - меня устраивает.

Добавлено через 7 минут
"Извращения с фреймами" нужны, чтобы пользователи могли менять ширину колонки в которой Редактор.

@Silver22 · 12.01.2021, 15:05

denismix, Помоему вы решаете изначально неправильно поставленную задачу. Почему не воспользоваться JS для этого? Как самый быстрый пример - https://jqueryui.com/resizable/.

@Lazor · 12.01.2021, 15:11

denismix, правильно заданный вопрос - половина ответа.

Если я правильно понял тебе нужны не фреймы, а
1. Такая вёрстка, чтобы ширину левого сайдбара могли изменять пользователи-гости
2. В этот сайдбар встроить стороннее приложение (на js?)

Так?

@denismix · 12.01.2021, 16:07 **[ТС]**

Сообщение от Silver22

Почему не воспользоваться JS для этого?

Спасибо! Просто не знал о jquery-ui.js

Только вопрос, как это "вкорячить" в WP так и остался открытым...

1. Если сделать разметку страницы с использованием jquery-ui, а потом во фреймы положить и Редактор и Блог - тогда нет никакого смысла, это по большому счету ничем от frameset не отличается - все части сайта остаются во фреймах

2. Если самому писать плагин, реализующий масштабируемый сайдбар для WP... это более-менее понятно как, но если честно, уже замучался программировать всякие нахлобучки на WP, да и нетривиально это с точки зрения мультиплатформенных/кроссбаузерных решений...

может есть какой то готовый плагин, позволяющий это делать с сайдбарами?

Добавлено через 4 минуты

Сообщение от Lazor

Если я правильно понял тебе нужны не фреймы, а
1. Такая вёрстка, чтобы ширину левого сайдбара могли изменять пользователи-гости
2. В этот сайдбар встроить стороннее приложение (на js?)
Так?

Почти что так =) Приложение нужно встроить свое родное, т.е. к нему есть полный доступ.

Добавлено через 4 минуты
Полностью с вами согласен, что правильно заданный вопрос - половина решения.
Проблема в том, что я как раз не знаю, что спрашивать =) вот и пишу "что то вроде сайдбара" и " есть ли готовый плагин"
Я на самом деле всего три месяца как пишу на JS, PHP, HTML, а WP использую вообще меньше месяца...

@Silver22 · 12.01.2021, 16:11

Сообщение от denismix

может есть какой то готовый плагин, позволяющий это делать с сайдбарами?

Я думаю что готового ничего нет.

Сообщение от denismix

2. Если самому писать плагин, реализующий масштабируемый сайдбар для WP... это более-менее понятно как, но если честно, уже замучался программировать всякие нахлобучки на WP, да и нетривиально это с точки зрения мультиплатформенных/кроссбаузерных решений...

Зачем плагин? Если вам нужно решить проблему только для своего сайта, проcтейшее решение (как я его вижу) - открыть контейнер в header.php и закрыть в footer.php темы. У вас весь сайт окажется в контейнере. Рядом вставляете свой фрейм + немного JS кода и всё должно работать.

@denismix · 12.01.2021, 16:15 **[ТС]**

Сообщение от Silver22

Зачем плагин?

Тема WP новая, еще активно обновляется, не хотелось бы лезть в ее код, но ваша идея понятна, спасибо!

@Silver22 · 12.01.2021, 16:17

Сообщение от denismix

Тема WP новая, еще активно обновляется, не хотелось бы лезть в ее код, но ваша идея понятна, спасибо!

Само собой оригинальную темы тровать не стоит - создайте дочернюю.

@denismix · 12.01.2021, 16:22 **[ТС]**

Сообщение от Silver22

Само собой оригинальную темы тровать не стоит - создайте дочернюю.

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

@Silver22 · 12.01.2021, 16:24

Сообщение от denismix

а что происходит с "дочками", когда обновляется основная тема?

Ничего не происходит. Обновляются только файлы основной темы. В вашем случае в дочерней теме должны быть только header.php, footer.php, function.php и файл с JS скриптами.

@denismix · 12.01.2021, 16:40 **[ТС]**

Сообщение от Silver22

Ничего не происходит. Обновляются только файлы основной темы. В вашем случае в дочерней теме должны быть только header.php, footer.php, function.php и файл с JS скриптами.

Подумалось, что может проще/правильнее вставить после <body ...> свой <div id="resizable"...> с фреймом внутри при помощи JS и не лезть в PHP темы вообще? Там буквально три строчки HTML... вопрос как на это отреагирует поток браузера?...

@Silver22 · 12.01.2021, 16:51

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

@Lazor · 12.01.2021, 17:14

Сообщение от denismix

Если самому писать плагин, реализующий масштабируемый сайдбар для WP..

Таак.. За внешний вид отвечает тема. Плагины - это функционал. Частично функции могут перекликаться, но... чтобы понять что именно как правильно делать просто надо принять за правило: функционал который должен сохраниться при смене темы должен быть в плагинах.

Возможность изменения размеров сайбара это скорее всё же относится к теме. Хотя в данном случае может частично быть и вынесено в плагин. А вот виджет/содержимое сайдбара - уже однозначно плагин.
См подробнее https://wpmag.ru/2014/functions-php/

И как совершенно правильно подсказал Silver22 - если тема не самописная (что как правило зло), то нужно использовать дочерние темы.

Добавлено через 7 минут

Сообщение от denismix

Только вопрос, как это "вкорячить" в WP так и остался открытым...

Для подключения js в ВП есть спец функция - wp_enqueue_script См https://wp-kama.ru/function/wp_enqueue_script

И вообще запомни этот сайт - там отличнейший поиск по функциям и примеры которых нет оф. манах. Но при применении всё же сверяйся с оф документацией https://developer.wordpress.org/reference/ - на каме мне встречались ошибки

@Silver22 90 / 74 / 49 Регистрация: 22.09.2015 Сообщений: 316
	12.01.2021, 16:51	13
	denismix, Не уверен что понимаю что такое поток браузера, но я вам подсказал как бы сделал я, а вы уж сами решайте. 0

@Lazor 444 / 574 / 120 Регистрация: 26.02.2019 Сообщений: 3,109 Записей в блоге: 3
	12.01.2021, 14:21	2
	Сообщение от denismix разместить фрейм. ... Яндексы, Фейсбуки, Твиттеры и т.д. не распознают картинки и другие важные для CEO-раскрутки теги внутри фреймсет фреймов (меня особенно волнует правая колонка - блог) Так тебе шашечки или ехать? (анек) Что именно тебе надо решить? Для чего эти извращения с фреймами? 0

@denismix 5 / 5 / 0 Регистрация: 03.10.2014 Сообщений: 307
	12.01.2021, 14:43 [ТС]	3
	Сообщение от Lazor Что именно тебе надо решить? Для чего эти извращения с фреймами? Сейчас в фреймах обе части сайта - поисковики не видят и не индексируют Блог, кроме того в Блоге есть "опасный" JS перебрасывающий на страницу с фреймсет, т.к. она главная и пользователи должны видеть именно такую компановку сайта. Если внутри фрейма будет только Редактор (левая колонка), а Блог станет Главной страницей сайта содержащей в себе фрейм с Редактором - меня устраивает. Добавлено через 7 минут "Извращения с фреймами" нужны, чтобы пользователи могли менять ширину колонки в которой Редактор. 0

@Silver22 90 / 74 / 49 Регистрация: 22.09.2015 Сообщений: 316
	12.01.2021, 15:05	4
	denismix, Помоему вы решаете изначально неправильно поставленную задачу. Почему не воспользоваться JS для этого? Как самый быстрый пример - https://jqueryui.com/resizable/. 1

@Lazor 444 / 574 / 120 Регистрация: 26.02.2019 Сообщений: 3,109 Записей в блоге: 3
	12.01.2021, 15:11	5
	denismix, правильно заданный вопрос - половина ответа. Если я правильно понял тебе нужны не фреймы, а 1. Такая вёрстка, чтобы ширину левого сайдбара могли изменять пользователи-гости 2. В этот сайдбар встроить стороннее приложение (на js?) Так? 1

@denismix 5 / 5 / 0 Регистрация: 03.10.2014 Сообщений: 307
	12.01.2021, 16:07 [ТС]	6
	Сообщение от Silver22 Почему не воспользоваться JS для этого? Спасибо! Просто не знал о jquery-ui.js Только вопрос, как это "вкорячить" в WP так и остался открытым... 1. Если сделать разметку страницы с использованием jquery-ui, а потом во фреймы положить и Редактор и Блог - тогда нет никакого смысла, это по большому счету ничем от frameset не отличается - все части сайта остаются во фреймах 2. Если самому писать плагин, реализующий масштабируемый сайдбар для WP... это более-менее понятно как, но если честно, уже замучался программировать всякие нахлобучки на WP, да и нетривиально это с точки зрения мультиплатформенных/кроссбаузерных решений... может есть какой то готовый плагин, позволяющий это делать с сайдбарами? Добавлено через 4 минуты Сообщение от Lazor Если я правильно понял тебе нужны не фреймы, а 1. Такая вёрстка, чтобы ширину левого сайдбара могли изменять пользователи-гости 2. В этот сайдбар встроить стороннее приложение (на js?) Так? Почти что так =) Приложение нужно встроить свое родное, т.е. к нему есть полный доступ. Добавлено через 4 минуты Полностью с вами согласен, что правильно заданный вопрос - половина решения. Проблема в том, что я как раз не знаю, что спрашивать =) вот и пишу "что то вроде сайдбара" и " есть ли готовый плагин" Я на самом деле всего три месяца как пишу на JS, PHP, HTML, а WP использую вообще меньше месяца... 0

@Silver22 90 / 74 / 49 Регистрация: 22.09.2015 Сообщений: 316
	12.01.2021, 16:11	7
	Сообщение от denismix может есть какой то готовый плагин, позволяющий это делать с сайдбарами? Я думаю что готового ничего нет. Сообщение от denismix 2. Если самому писать плагин, реализующий масштабируемый сайдбар для WP... это более-менее понятно как, но если честно, уже замучался программировать всякие нахлобучки на WP, да и нетривиально это с точки зрения мультиплатформенных/кроссбаузерных решений... Зачем плагин? Если вам нужно решить проблему только для своего сайта, проcтейшее решение (как я его вижу) - открыть контейнер в header.php и закрыть в footer.php темы. У вас весь сайт окажется в контейнере. Рядом вставляете свой фрейм + немного JS кода и всё должно работать. 0

@denismix 5 / 5 / 0 Регистрация: 03.10.2014 Сообщений: 307
	12.01.2021, 16:15 [ТС]	8
	Сообщение от Silver22 Зачем плагин? Тема WP новая, еще активно обновляется, не хотелось бы лезть в ее код, но ваша идея понятна, спасибо! 0

@Silver22 90 / 74 / 49 Регистрация: 22.09.2015 Сообщений: 316
	12.01.2021, 16:17	9
	Сообщение от denismix Тема WP новая, еще активно обновляется, не хотелось бы лезть в ее код, но ваша идея понятна, спасибо! Само собой оригинальную темы тровать не стоит - создайте дочернюю. 0

@denismix 5 / 5 / 0 Регистрация: 03.10.2014 Сообщений: 307
	12.01.2021, 16:22 [ТС]	10
	Сообщение от Silver22 Само собой оригинальную темы тровать не стоит - создайте дочернюю. а что происходит с "дочками", когда обновляется основная тема? Я в этом деле совсем нуб, всего три месяца стажа в веб программировании... т.е. как "подтягиваются "родительские" модули я понимаю, но как вставить в "дочку" вашу идею, чтобы она обновлялась с "родителем" - это уже для меня темный лес. 0

@Silver22 90 / 74 / 49 Регистрация: 22.09.2015 Сообщений: 316
	12.01.2021, 16:24	11
	Сообщение от denismix а что происходит с "дочками", когда обновляется основная тема? Ничего не происходит. Обновляются только файлы основной темы. В вашем случае в дочерней теме должны быть только header.php, footer.php, function.php и файл с JS скриптами. 1

	12.01.2021, 17:14

Опции темы

@denismix 5 / 5 / 0 Регистрация: 03.10.2014 Сообщений: 307
	12.01.2021, 16:40 [ТС]	12
	Сообщение от Silver22 Ничего не происходит. Обновляются только файлы основной темы. В вашем случае в дочерней теме должны быть только header.php, footer.php, function.php и файл с JS скриптами. Подумалось, что может проще/правильнее вставить после <body ...> свой <div id="resizable"...> с фреймом внутри при помощи JS и не лезть в PHP темы вообще? Там буквально три строчки HTML... вопрос как на это отреагирует поток браузера?... 0

@Lazor 444 / 574 / 120 Регистрация: 26.02.2019 Сообщений: 3,109 Записей в блоге: 3
	12.01.2021, 17:14	14
	Сообщение от denismix Если самому писать плагин, реализующий масштабируемый сайдбар для WP.. Таак.. За внешний вид отвечает тема. Плагины - это функционал. Частично функции могут перекликаться, но... чтобы понять что именно как правильно делать просто надо принять за правило: функционал который должен сохраниться при смене темы должен быть в плагинах. Возможность изменения размеров сайбара это скорее всё же относится к теме. Хотя в данном случае может частично быть и вынесено в плагин. А вот виджет/содержимое сайдбара - уже однозначно плагин. См подробнее https://wpmag.ru/2014/functions-php/ И как совершенно правильно подсказал Silver22 - если тема не самописная (что как правило зло), то нужно использовать дочерние темы. Добавлено через 7 минут Сообщение от denismix Только вопрос, как это "вкорячить" в WP так и остался открытым... Для подключения js в ВП есть спец функция - wp_enqueue_script См https://wp-kama.ru/function/wp_enqueue_script И вообще запомни этот сайт - там отличнейший поиск по функциям и примеры которых нет оф. манах. Но при применении всё же сверяйся с оф документацией https://developer.wordpress.org/reference/ - на каме мне встречались ошибки 1