Добавляю JS на страницу, впервые.

dopolz
(@dopolz)

6 лет, 4 месяца назад

Привет, умельцы.
Предметно-популярных ответов, как это сделать не прошу, но признателен буду.
В остальном же суть в следующем.
Изучаю JS, сделал некий график и хочу его вставить на определённую страницу своего сайта.
Сайт мой, но обслуживаю его не я.
И потому мотивация к изучению web-разработки всегда актуальна)
Так вот.
Хочу вставить этот код, но понять с ходу не получилось.
Во первых, примерную суть WP я понимаю, очень поверхностно, но понимаю.
Подскажите мне, что начать читать, чтобы максимально быстро реализовать задуманную мной авантюру?
То есть, не глобально заняться изучением PHP & WP, а локально, что сейчас мне читать и вникать, чтобы заделать этот код в НУЖНОЕ место на сайте?

Я поставил уже себе локально WP, создал две тестовых страницы, тренируюсь пока на них.
Поэтому можно на примере «голого» WP, чтобы не влезать в дебри сильно изменённого моего ресурса.

Спасибо)

Страница, с которой нужна помощь: [войдите, чтобы увидеть ссылку]

Просмотр 15 ответов — с 1 по 15 (всего 17)

1 2 →

SeVlad
(@sevlad)

6 лет, 4 месяца назад

что сейчас мне читать и вникать, чтобы заделать этот код в НУЖНОЕ место на сайте?

Если «нужное место» — это контент поста или виджет, то нужно сделать шорткод, который уже вставить в контент поста.
См https://codex.wordpress.org/ru:Shortcode_API (а внизу есть ссылки на необходимые функции ВП).
Сам код шорткода можно оформить как свой плагин (это лучше и совсем не сложно) или же использовать плагины для создания шорткодов.

Если «нужное место» другое — рассказывайте об этом подробнее. В тч и о логике вывода.

Автор dopolz
(@dopolz)

6 лет, 4 месяца назад

Про шорткод «слышал», но не вникал, почитаю обязательно, спасибо.
Относительно нужного места — то буквально это на скрине указал.
скрин
Логика вывода самописного JS — страницу открыли, график получил массив со значениями, и отрисовался.
На данном этапе мне пока важно только реализация вывода на нужной странице в нужном месте.
А получение данных будет вопросом дальним, когда разберусь с фронтом.
Сам график выглядит так:
codepen
O
(@perdyllo)

6 лет, 4 месяца назад
На данном этапе мне пока важно только реализация вывода на нужной странице в нужном месте.

Все гораздо проще, чем было рекомендовано выше. Точнее принцип тот же, но проще.
Плагин https://ru.wordpress.org/plugins/insert-html-snippet/ преобразует любой HTML или жаба-скрипт в шорткод, который в свою очередь просто и безопасно вставляется в пост, страницу, виджет.
А с помощью такой конструкции нужный шорткод внедряется непосредственно в шаблоны темы. (Естественно специально созданной дочерней темы, чтобы ваши изменения шаблонов не пропали при обновлении темы)

<?php echo do_shortcode( '[ваш_шорткод]' ); ?>
- Ответ изменён 6 лет, 4 месяца назад пользователем O.
- Ответ изменён 6 лет, 4 месяца назад пользователем O.
Автор dopolz
(@dopolz)

6 лет, 4 месяца назад

Все гораздо проще…

Благодарю, на тестовой локальной версии испытаю.

Но вопрос чтения всё равно актуальный.
Я хочу разобраться как мне руками прописать, чтобы всё заработало.
Даже если не брать во внимание какие-либо графики, это не принципиально.
Пусть даже просто вставить картинку в желаемую страницу и в желаемое на ней место.
Вот что важно мне понимать.
Если более иерархично, то мой вопрос можно дифференцировать, и первый пункт будет такой:
— как найти файл который отвечает за нужную мне страницу?
Буквально, например есть у меня некая страница ТЕСТ1.
Мне нужно понимать, как мне найти файлы для правки, изменения в которых позволят вставить картинку именно на эту страницу.
Я возможно пишу бред))
Но это тот вопрос который у меня сейчас вызывает проблемы.

Я пока гугло-поиском вообще только понял, что в основном всем рулит Function.php, который лежит в корне используемой темы.
Попытался по публикуемым примерам, написать в него функции для создания хука и прописать путь к моему подключаемому файлу JS.
Но ничего толкового из этого не вышло)
Поэтому понял, надо начинать читать, пусть не всё и сразу, но как-то более целенаправленно.

Прошу прощения за много букв)

SeVlad
(@sevlad)

6 лет, 4 месяца назад

как найти файл который отвечает за нужную мне страницу?

За одну конкретную страницу — нет такого файла. Есть шаблоны темы, применяемые по определённой логике.
Вы также можете создать отдельный шаблон для нужной Вам страницы и в него внедрить Ваш код.
См https://developer.wordpress.org/reference/functions/wp_enqueue_script/ для правильного подключения js.

Но это всё потеряется при смене темы. Поэтом правильный путь — плагин.

ЗЫ. Вашего срина я не видел

Автор dopolz
(@dopolz)

6 лет, 4 месяца назад

Вашего срина я не видел

Понял, исправил. Признаться не знал, что это проблема.
В случае если кому-либо будет полезен, прикрепил в нормальный имдж-сервис)
Скрин на нормальном имдж-сервисе)

SeVlad
(@sevlad)

6 лет, 4 месяца назад

Скрин на нормальном имдж-сервисе)

О.. судя по скрину Вам не столько js, сколько выборку (и соответственно внесение) данных нужно делать. Задача (в совокупности с js) не для новичка в ВП.

O
(@perdyllo)

6 лет, 4 месяца назад

на тестовой локальной версии

Фи… Какая гадость.

Автор dopolz
(@dopolz)

6 лет, 4 месяца назад

js, выборка, внесение

В итоге мой скрипт — это всего-лишь SVG-картинка (почти).
Примем её условно за скрипт, который не требует никаких входных данных.
Лежит себе в отдельном файле, где-нибудь в \wp-content\plugins
И нуждается только в исполнении на нужной странице.

Какой алгоритм действий будет в таком случае?
Я сейчас из всей каши от постоянных поисков информации, отрывками вижу такой:
— зарегистрировать скрипт через wp_register_script() в function.php
— затем подключить его с помощью wp_enqueue_script()
— и прикрепить скрипт на какое-то событие с add_action()

Это в общем, весь поиск пестрит подобными примерами по правильному подключению JS-скриптов, в том числе и здесь уже мне это рекомендовали.

Но я не смог найти примеры подключения скрипта к определённой странице.
Подскажите?

tuxfighter
(@tuxfighter)

6 лет, 4 месяца назад

Скажите, что мешает вам вставить ваш скрипт в нужном месте страницу, прям в редакторе, с помощью плагинов? Огромное желание поплясать с бубном?

Автор dopolz
(@dopolz)

6 лет, 4 месяца назад

желание поплясать

Вы совершенно правы.
Я хочу понять и научиться.
К тому же скрипт написан с учётом получения входных значений, и они будут меняться ест-но.
Так что просто вставить это не мой случай.

SeVlad
(@sevlad)

6 лет, 4 месяца назад

Но я не смог найти примеры подключения скрипта к определённой странице.

Вставить в неё шорткод.
Или для этой «определённой страницы» можно создать свой шаблон и/или же использовать функции условий — is_ или in_.

Так что просто вставить это не мой случай.

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

Но это касается только лишь вопроса «вставить скрипт». Будет ли Ваш скрипт работать как Вы думаете — совершенно другой вопрос.
Автор dopolz
(@dopolz)

6 лет, 4 месяца назад
Почему этот код плагина не работает?
```
<?php

/*
 * Plugin Name: courseAnimation
 */

add_action('wp_enqueue_scripts', 'courseAnimation');

function courseAnimation() {
	
	wp_enqueue_script('courseAnimation', plugins_url('courseAnimation.js', __FILE__));
	
};
 
?>
```
А вот этот работает, но коряво:
```
/*
 * Plugin Name: courseAnimation
 */

<?php

add_action('wp_enqueue_scripts', 'courseAnimation');

function courseAnimation() {
	
	wp_enqueue_script('courseAnimation', plugins_url('courseAnimation.js', __FILE__));
	
};
 
?>
```
Автор dopolz
(@dopolz)

6 лет, 4 месяца назад
Эмпирически я понял почему в первом случае не рисует скрипт, и напротив почему рисует во втором.
Сделал с условием на нужную страницу (тестирую на локальной версии):
```
<?php

/*
 * Plugin Name: courseAnimation
 */

add_action('wp_enqueue_scripts', 'courseAnimation');

function courseAnimation() {
	if (is_page('firsttt')) {
		echo '!!!!!';
		$path = plugins_url('courseAnimation.js', __FILE__);
		wp_enqueue_script('courseAnimation', $path);
 	};
};
?>
```
Но теперь надо понять, как избавиться от ECHO, и при этом чтобы всё отрисовывалось?
И намекните как правильно позиционировать вывод скрипта (график) на странице?
O
(@perdyllo)

6 лет, 4 месяца назад

Эмпирически я понял почему в первом случае не рисует скрипт, и напротив почему рисует во втором.

Суть этого обсуждения все дальше и дальше уходит от WordPress и изначальной своей темы:

Хочу вставить этот код, но понять с ходу не получилось.

dopolz Вам наверное лучше проложить обсуждение своего скрипта на другом, соответствующем форуме.