Как вывести значение поля

the_field() ACF 1.0.3

Выводит на экран значение указанного поля (метаполя).

Эта мощная функция может использоваться для вывода значения любого поля в любом месте.

Это обёртка для функции get_field().

Возвращает

null . Выводит данные на экран.

Использование

Примеры

#1 Вывод значения из текущего поста

Пример показывает как выести значение поля “text_field” из текущего поста.

#2 Вывод значения из определенного поста

Пример показывает как выести значение поля “text_field” из поста >

#3 Проверка значения на существование

Пример показывает предварительную проверку значения на существование (установку) до выведения значения.

#4 Получение значений из различных объектов

В этом примере показано множество допустимых значений $post_id, указывающих, где сохранено значение.

Список изменений

Код the_field() the field ACF 5.10.2

Cвязанные функции

Вопрос,как можно добавить функцию в html чтобы можно было потом в шаблоне изменить цвет блока или фона? Я ввожу в

, но ничего не происходи только сверху появляется формат цвета ##dd4f4f

Управление отображением элемента в документе происходит через таблицу стилей CSS. У команды есть встроенный инструмент по добавлению идентифкаторов (class или id — на ваше усмотрение), в случае необходимости можно обернуть команду в div с удобным идентификатором, которому можно назначить стили.
На уровне PHP вы не управляете стилями элементов. Возможно только дополнить элемент аттрибутом style.

Источник

get_post_meta() WP 1.5.0

Получает значение произвольного поля записи (поста). Позволяет также получить все метаполя.

Для того, чтобы получить значение всех произвольных полей определенного поста, нужно оставить пустым параметр $key . Также для этого можно воспользоваться функцией get_post_custom().

Если в данных содержится сериализованный массив (serialize), то он автоматом будет обработан функцией unserialize() , т.е. чтобы получить сериализованные данные их не нужно отдельно обрабатывать функцией unserialize() .

Возвращает

Если в значении метаполя хранится число оно будет возвращено в виде строки, например, «54» .

Вернет false , когда неправильно передан параметр $post_id .

При $single = true

• строка/массив — когда метаполе есть.
• » — когда метаполя нет.

При $single = false

• массив значений метаполей — когда метаполе есть.
• array() — когда метаполя нет.

Использование

true — вернет значение метаполя (если полей несколько то вернет значение первого метаполя).
false — вернет массив всех значений мета полей с указанным ключом.

Если в значении произвольного поля находится сериализованный массив, то значение true вернет, нормальный массив, а если указать false , то вернется массив в элементе «[0]» которого будет все тот же сериализованный массив.

По умолчанию: false

Примеры

#1 Получим массив значений произвольных полей

Получим значения полей поста 76, ключ которых равен key_1 , подразумевается что у поста несколько произвольных полей с ключом key_1 :

#2 Получим все произвольные поля записи

Если не указать ключ произвольного поля для функции, то она получит все поля сразу:

#3 Получим только одно произвольное поле

Чтобы получить только первое (или единственное) значение произвольного поля в виде строки, используем такой вызов функции:

#4 Объединение всех метаполей в объект

Этот пример показывает как можно удобно объединить все произвольные поля записи.

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

Подразумевается, что ключи произвольных полей не в кириллице и у поля с одним ключом предусмотрено только одно значение — все это обычное явление:

В WordPress есть незадокументированная возможность получать метаполе записи так: $post->my_meta_key , где $post — объект WP_Post, а my_meta_key — название метаполя, которое нужно получить.

#5 Пример использования get_post_meta() внутри Цикла WordPress.

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

#6 Проверим существование указанного метаполя

Когда нужно проверить существует ли поле, с любым значением: пустая строка или 0:

#7 Использования функций произвольных полей на примере авторской функции

#8 Вывод всех произвольных полей всех записей

Этот пример показывает как одним запросом вывести все уникальные произвольные поля и посчитать сколько всего их используется в БД. Такой запрос может пригодится для профилирования произвольных полей записей:

Источник

Выразительный JavaScript: Формы и поля форм

Содержание

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

Мефистофель, в «Фаусте» Гёте

Формы были кратко представлены в предыдущей главе в качестве способа передачи информации, введённой пользователем, через HTTP. Они были разработаны в вебе до появления JavaScript, с тем расчётом, что взаимодействие с сервером происходит при переходе на другую страницу.

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

Кнопка с атрибутом type равным submit при нажатии отправляет форму. Нажатие клавиши Enter внутри поля формы имеет тот же эффект.

Отправка формы обычно означает, что браузер переходит на страницу, обозначенную в атрибуте формы action, используя либо GET либо POST запрос. Но перед этим запускается свойство “submit”. Его можно обработать в JavaScript, и обработчик может предотвратить поведение по умолчанию, вызвав на объекте event preventDefault.

Перехват событий “submit” полезен в нескольких случаях. Мы можем написать код, проверяющий допустимость введённых значений и сразу же показать ошибку вместо передачи данных формы. Или мы можем отключить отправку формы по умолчанию и дать программе возможность самой обработать ввод, например используя XMLHttpRequest для отправки данных на сервер без перезагрузки страницы.

Текстовые поля

Поля с тегами и типами text и password, а также теги , имеют общий интерфейс. У их элементов DOM есть свойство value, в котором содержится их текущее содержимое в виде строки текста. Присваивание этому свойству значения меняет содержимое поля.

Свойства текстовых полей selectionStart и selectionEnd содержат данные о положении курсора и выделения текста. Когда ничего не выделено, их значение одинаковое, и равно положению курсора. Например, 0 обозначает начало текста, 10 обозначает, что курсор находится после 10-го символа. Когда выделена часть поля, свойства имеют разные значения, а именно начало и конец выделенного текста. В эти поля также можно записывать значение.

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

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

Событие “change” для текстового поля не срабатывает каждый раз при вводе одного символа. Оно срабатывает после потери полем фокуса, когда его значение было изменено. Чтобы мгновенно реагировать на изменение текстового поля нужно зарегистрировать событие “input”, которое срабатывает каждый раз при вводе символа, удалении текста или других манипуляциях с содержимым поля.

В следующем примере мы видим текстовое поле и счётчик, показывающий текущую длину введённого текста.

Галочки и радиокнопки

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

Тег используется для связи куска текста с полем ввода. Атрибут for должен совпадать с id поля. Щелчок по метке label включает поле ввода, оно получает фокус и меняет значение – если это галочка или радиокнопка.

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

Метод document.getElementsByName выдаёт все элементы с заданным атрибутом name. Пример перебирает их (посредством обычного цикла for, а не forEach, потому что возвращаемая коллекция – не настоящий массив) и регистрирует обработчик событий для каждого элемента. Помните, что у объектов событий есть свойство target, относящееся к элементу, который запустил событие. Это полезно для создания обработчиков событий – наш обработчик может быть вызван разными элементами, и у него должен быть способ получить доступ к текущему элементу, который его вызвал.

Поля select

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

Атрибут size тега = 0

Файловое поле

Файловое поле изначально было предназначено для закачивания файлов с компьютера через форму. В современных браузерах они также позволяют читать файлы из JavaScript. Поле работает как охранник для файлов. Скрипт не может просто взять и открыть файл с компьютера пользователя, но если тот выбрал файл в этом поле, браузер разрешает скрипту начать чтение файла.

Файловое поле обычно выглядит как кнопка с надписью вроде «Выберите файл», с информацией про выбранный файл рядом с ней.

Свойство files элемента – массивоподобный объект (не настоящий массив), содержащий список выбранных файлов. Изначально он пуст. У элемента нет простого свойства file, потому что пользователь может выбрать несколько файлов за раз при включённом атрибуте multiple.

У объектов в свойстве files есть свойства имя (имя файла), размер (размер файла в байтах), и тип (тип файла в смысле media type — text/plain или image/jpeg).

Чего у него нет, так это свойства, содержащего содержимое файла. Чтобы получить содержимое, приходится постараться. Так как чтение файла с диска занимает длительное время, интерфейс должен быть асинхронным, чтобы документ не замирал. Конструктор FileReader можно представлять себе, как конструктор XMLHttpRequest, только для файлов.

Чтение файла происходит при помощи создания объекта FileReader, регистрации обработчика события “load” для него, и вызова его метода readAsText с передачей тому файла. По окончании загрузки в свойстве result сохраняется содержимое файла.

Пример использует Array.prototype.forEach для прохода по массиву, так как в обычном цикле было бы неудобно получать нужные объекты file и reader от обработчика событий. Переменные были бы общими для всех итераций цикла.

Объекты FileReader также инициируют событие “error”, когда чтение файла не получается. Объект error будет сохранён в свойстве error. Если вы не хотите забивать голову ещё одной неудобной асинхронной схемой, вы можете обернуть её в обещание (см. главу 17):

Возможно читать только часть файла, вызывая slice и передавая результат (т.н. объект blob) объекту reader.

Хранение данных на стороне клиента

Простые HTML-странички с добавкой JavaScript могут выступать отличной основой для мини-приложений – небольших вспомогательных программ, автоматизирующих ежедневные дела. Присоединив к полям формы обработчики событий вы можете делать всё – от конвертации фаренгейтов в цельсии до генерации паролей из основного пароля и имени веб-сайта.

Когда такому приложению нужно сохранять информацию между сессиями, переменные JavaScript использовать не получится – их значения выбрасываются каждый раз при закрытии страницы. Можно было бы настроить сервер, подсоединить его к интернету и тогда приложение хранило бы ваши данные там. Это мы разберём в главе 20. Но это добавляет вам работы и сложности. Иногда достаточно хранить данные в своём браузере. Но как?

Можно хранить строковые данные так, что они переживут перезагрузку страниц — для этого надо положить их в объект localStorage. Он разрешает хранить строковые данные под именами (которые тоже являются строками), как в этом примере:

Переменная в localStorage хранится, пока её не перезапишут, удаляется при помощи removeItem или очисткой локального хранилища пользователем.

У сайтов с разных доменов – разные отделения в этом хранилище. То есть, данные, сохранённые с вебсайта в localStorage, могут быть прочтены или перезаписаны только скриптами с этого же сайта.

Также браузеры ограничивают объём хранимых данных, обычно в несколько мегабайт. Это ограничение, вкупе с тем фактом, что забивание жёстких дисков у людей не приносит прибыли, предотвращает отъедание места на диске.

Следующий код реализует простую программу для ведения заметок. Она хранит заметки в виде объекта, ассоциируя заголовки с содержимым. Он кодируется в JSON и хранится в localStorage. Пользователь может выбрать записку через поле новая

Скрипт инициализирует переменную notes значением из localStorage, а если его там нет – простым объектом с одной пустой записью «что купить». Попытка прочесть отсутствующее поле из localStorage вернёт null. Передача null в JSON.parse заставит его проанализировать строку «null» и вернуть null обратно. Поэтому для значения по умолчанию можно использовать оператор ||.

Когда данные в note меняются (добавляется новая запись или меняется текущая), для обновления хранимого поля вызывается функция saveToStorage. Если б мы рассчитывали, что у нас будут храниться тысячи записей, это было бы слишком накладно, и нам пришлось бы придумать более сложную процедуру для хранения – например, своё поле для каждой записи.

Когда пользователь добавляет запись, код должен обновить текстовое поле, хотя у поля и есть обработчик “change”. Это нужно потому, что событие “change” происходит, только когда пользователь меняет значение поля, а не когда это делает скрипт.

Есть ещё один похожий на localStorage объект под названием sessionStorage. Разница между ними в том, что содержимое sessionStorage забывается по окончанию сессии, что для большинства браузеров означает момент закрытия.

HTML предоставляет множество различных типов полей формы – текстовые, галочки, множественного выбора, выбора файла.

Из JavaScript можно получать значение и манипулировать этими полями. По изменению они запускают событие “change”, по вводу с клавиатуры – “input”, и ещё много разных клавиатурных событий. Они помогают нам отловить момент, когда пользователь взаимодействует с полем ввода. Свойства вроде value (для текстовых полей и select) или checked (для галочек и радиокнопок) используются для чтения и записи содержимого полей.

При передаче формы происходит событие “submit”. Обработчик JavaScript затем может вызвать preventDefault этого события, чтобы предотвратить передачу данных. Элементы формы не обязаны быть заключены в теги .

Когда пользователь выбрал файл в своей локальной файловой системе через поле выбора файла, интерфейс FileReader позволит нам добраться до содержимого файла из программы JavaScript.

Объекты localStorage и sessionStorage можно использовать для хранения информации таким способом, который переживёт перезагрузку страницы. Первый сохраняет данные навсегда (ну или пока пользователь специально не сотрёт их), а второй – до закрытия браузера.

Упражнения

Верстак JavaScript

Сделайте интерфейс, позволяющий писать и исполнять кусочки кода JavaScript.

Сделайте кнопку рядом с Поехали

Автодополнение

Дополните текстовое поле так, что при вводе текста под ним появлялся бы список вариантов. У вас есть массив возможных вариантов, и показывать нужно те из них, которые начинаются с вводимого текста. Когда пользователь щёлкает по предложенному варианту, он меняет содержимое поля на него.

Игра «Жизнь» Конвея

Это простая симуляция жизни на прямоугольной решётке, каждый элемент которой живой или нет. Каждое поколение (шаг игры) применяются следующие правила:

— каждая живая клетка, количество живых соседей которой меньше двух или больше трёх, погибает;
— каждая живая клетка, у которой от двух до трёх живых соседей, живёт до следующего хода;
— каждая мёртвая клетка, у которой есть ровно три живых соседа, оживает.

Соседи клетки – это все соседние с ней клетки по горизонтали, вертикали и диагонали, всего 8 штук.

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

Источник