Hozzáadása média feltöltő Egyéni mezők vagy más jellegű képet, hogy te jobban élnek

Az egész kezdődött egy évvel ezelőtt azzal a ténnyel, hogy én akartam, hogy adjunk egy média feltöltő a bővítmény menü képet, de sajnos, ugyanakkor el kell kerülnie a js fájlt a kéreg wordpress semmit sem lehet tenni, és másolja be a kódot nem akar, mert az a tény, hogy ő kell fenntartani a frissítés során, és hogy a pontszámot. De nemrég úgy döntött, hogy felülvizsgálja, mi változott, és ez lett belőle.

Most megyünk az admin felületen, és tartalmaz egy új téma, úgy tűnik, hogy nem fog különbözni attól twentyfourteen. Ezután hozzon létre egy functions.php és olvasni.

Hozzáadása METABOX kimeneti HTML kódot Képeink

Regisztráljon egy függvényt admin_init esemény:

Most már csak hozzá, METABOX és semmi nem működik, mert a visszahívási funkció hívni még hozzá:

Most meg lehet nézni, és ez az, amit meg kell szereznie

Most még több hasznos html kódot metabox'a, hozzá csak egy ilyen funkció:

Ez a funkció csak akkor működik: kap kép azonosító paramétert, és megjeleníti azt, különben kimenetek normális kapcsolatot, amikor rákattintunk, akkor hívja a média letöltött. Nevezzük ezt a funkciót a metabox'e:

Itt is, csak hogy a tisztségből meta információt a kulcs _alt_thumbnail_id és átment a funkciót, amely megjeleníti a HTML. Meta adatok a legfontosabb mégis úgy, hogy az admin, ha csak most egy törött link.

Ebben az első részben a lefüggönyözött, továbbra is js.

Csatlakozó a js fájlt, amely hatására média letöltött

Először hozzon létre egy könyvtárat a gyökér a szálak belsejében js fájl, amely fel alternative_image.admin.js. Add a funkciót, hogy az esemény, amelynek admin_enqueue_scripts és csatlakoztassa a fájlt, és egy pár fájlt a kéreg:

Ebben a funkcióban wp_localize_script nem tudja megjeleníteni a megszokott funkció, de ez csak átmegy paraméterek php js. A paraméterek maguk tömb fordításban, ez a címe a windows media rakodó, amikor kiválasztja a gomb képe, és a beállítási nonce. amely kap egy egyedi kódot kell küldeni a Ajax kérés, és amely szükséges, hogy megakadályozzák CSRF.
És a js fájl lesz itt a következő kódot:

Van is nem nagy ügy, a „könnyű és egyszerű» ™. Id mi metabox'a - alternative_image. hogy ragaszkodnak a kattintások belül. Klikk lesz két: hozzáadását és törlését képeket. Ha rákattint a képre, add nevezett média rakodó paraméterekkel átengedjük wp_localize_script. Miután kiválasztotta a képet, és nyomja meg a gombot, a rakodó hatására a select eseményt, amelyhez hozzá egy funkciót, hogy az első kiválasztott kép (és lehet, hogy több cm. A többszörös paraméter), és okoz AltImageUpdate funkció paraméterrel id id bejegyzést, és a kiválasztott képet. És amikor a képre kattint eltávolítása miatt az azonos funkciójú, de ahelyett, hogy a képátvitel id -1. Az ugyanazon AltImageUpdate függvény egyszerűen küld ajax kérést, majd feldolgozzuk, és beilleszti az adatokat a METABOX.

Most van itt az ideje, hogy az admin felületen meg az eredményt. Ha rákattint a linkre belsejében metabox'a média feltöltő jelenik, de ha ki a képet, nem történik semmi. És, hogy valami történt a ajax egy esemény a következő részben.

Mentse a kiválasztott kép

Továbbra is menteni a kiválasztott kép id amelyet küldünk keresztül Ajax kérés.

E tudással felvértezve, adjuk hozzá az utolsó funkció, amely felszólította, Ajax kérés azonosító és mentse el a képet egy bejegyzést:

De minden jó, nagyon, nagyon egyszerű ebben a funkcióban. Id hogy a posta és a kép a továbbított adatokat, ellenőrizze, hogy az aktuális felhasználó által szerkeszthető a jelenlegi bejegyzést, és ellenőrizze az egyszer. további eltávolítására meta adatokat, ha az átvitt azonosító értéke -1, különben frissítése meta írtunk _alt_thumbnail_id továbbított id pontja és képet. Ennél mentése és törlése képek már dolgozunk, ha minden jól megy, akkor a hívó behívott metabox'e megjeleníteni HTML kódot, és továbbítja azt vissza arra a következtetésre js kódot, amely be van dugva a kimeneti metabox'a.

Ez történik a végén:

A kényelmes képkimeneti másolni egy pár funkció a kéregben:

Most, bármilyen erre alkalmas helyen a sablon a ciklusba. levezetjük

Mint egy bónusz elmagyarázzák, hogyan lehet ugyanazon a területen, de a képesség, hogy több kép kiválasztása.
Kép magára a figyelmet

Hozzászólás navigáció

Mondd meg, hol olvashatunk wp.media?

Mintegy wp.media olvasható a js fájlt a nevét, amely a szó a média, mint olyan dokumentáció senki írta, mert nagyon gyorsan változnak a dolgok.

Ez nem működik, mindezt ahogy meg van írva ((

Pontosan mi nem működik? Lásd a konzol kimenetet, rönk php. A minap vetem ki egy működő változata a fájlt, ha nem szabad elfelejteni)

Üdvözlet, találtam bejegyzést. Most én mastering a WP és pontosan mit le van írva a cikkben. Van egy probléma - nem az úgynevezett média letöltött. Bár a script /js/alternative_image.admin.js podkgruzilsya. Még mindig nem működnek a témát, és a dugó.
PHP függvény csatlakozni js-script:

függvény inmtoo_realt_admin_enqueue_scripts_action ($ hook) global $ bejegyzést;

// ellenőrizheti, hogy egy bejegyzést oldal szerkesztése, és nem más admin oldalon
if (
($ Hook == 'post-new.php' || $ hook == 'post.php)
$ Post> POST_TYPE == 'realty_residental'
)

// terhelés médiakönyvtárának szkriptek
wp_enqueue_media ();
wp_enqueue_style (szerkesztő gombok ');

// betölteni js fájl
wp_enqueue_script (
„Alternatív-image”
plugin_dir_url (__FILE__). „/js/alternative_image.admin.js”
array ( 'jQuery')
);

// hozzá változókat a mi js fájl
wp_localize_script (
„Alternatív-image”
„Inmtoo_Realty”
array (
'L10N' => array (
'UploaderTitle' => __ ( 'Set alternatív kép', 'Inmtoo_Realty'),
'UploaderButton' => __ ( 'Select image', 'Inmtoo_Realty'),
)
'Nonce' => wp_create_nonce ( 'set_post_alternative_thumbnail_'. $ Post-> ID),
)
);
>
>

És magam JS
(Funkció ($) $ (document) .ready (function () var AltImageUpdate = function (POST_ID, thumb_id) wp.media.post (set_alternative_thumbnail "POST_ID: POST_ID,
thumbnail_id: thumb_id,
nonce: child_theme.nonce
>) .Kelt (function (html) $ ( '# alternative_image) .find ( 'belül'.) .html (html);
>);
>;

$ ( '# Alternative_image)
.A ( 'click', '# set-post-alternatív-thumbnail' funkció (e) e.preventDefault ();
e.stopPropagation ();

var feltöltő = wp.media (cím: child_theme.l10n.uploaderTitle,
gomb: ,
több: true
>);
uploader.on ( 'kiválasztás', funkció () var mellékletek = [];
. Uploader.state () kap ( 'kiválasztás') .forEach (funkció (i) attachments.push (i.id);
>);
AltImageUpdate (wp.media.view.settings.post.id, mellékletek);
>);
uploader.open ();
>)
.A ( 'click', '# eltávolítás-post-alternatív-thumbnail' funkció (e) e.preventDefault ();
e.stopPropagation ();

AltImageUpdate (wp.media.view.settings.post.id, -1);
>);
>);
>) (JQuery);

Szia, felmerült a gyanú, hogy az eredeti formájában a script nem működik az új verzió, az agykéreg, én különösen nem működött az EP azóta. Már a kezdet kezdetén pillantást js konzolon lehetnek hibák.

Add előre elkészített téma, töltse le és mit nem.

Köszönöm) Látom letöltés)