Căutați o modalitate de a atașa imagini la postări cu o simplă casetă meta de selecție a miniaturilor? Deși probabil există un plugin pentru asta, am creat un fragment de cod rapid pe care îl puteți folosi pentru a atașa imagini la postări cu o simplă casetă meta de selecție a miniaturilor în WordPress.
Instrucțiuni:
Tot ce trebuie să faceți este să adăugați acest cod în fișierul functions.php al temei dvs. sau într-un plugin specific site-ului:
add_action("admin_init", "images_init");
add_action('save_post', 'save_images_link');
function images_init(){
$post_types = get_post_types();
foreach ( $post_types as $post_type ) {
add_meta_box("my-images", "Pictures", "images_link", $post_type, "normal", "low");
}
}
function images_link(){
global $post;
$custom = get_post_custom($post->ID);
$link = $custom["_link"][0];
$count = 0;
echo '<div class="link_header">';
$query_images_args = array(
'post_type' => 'attachment',
'post_mime_type' =>array(
'jpg|jpeg|jpe' => 'image/jpeg',
'gif' => 'image/gif',
'png' => 'image/png',
),
'post_status' => 'inherit',
'posts_per_page' => -1,
);
$query_images = new WP_Query( $query_images_args );
$images = array();
echo '<div class="frame">';
$thelinks = explode(',', $link);
foreach ( $query_images->posts as $file) {
if(in_array($images[]= $file->ID, $thelinks)){
echo '<label><input type="checkbox" group="images" value="'.$images[]= $file->ID.'" checked /><img src="'.$images[]= $file->guid.'" width="60" height="60" /></label>';
}else{
echo '<label><input type="checkbox" group="images" value="'.$images[]= $file->ID.'" /><img src="'.$images[]= $file->guid.'" width="60" height="60" /></label>';
}
$count++;
}
echo '<br /><br /></div></div>';
echo '<input type="hidden" name="link" class="field" value="'.$link.'" />';
echo '<div class="images_count"><span>Files: <b>'.$count.'</b></span> <div class="count-selected"></div></div>';
}
function save_images_link(){
global $post;
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE){ return $post->ID; }
update_post_meta($post->ID, "_link", $_POST["link"]);
}
add_action( 'admin_head-post.php', 'images_css' );
add_action( 'admin_head-post-new.php', 'images_css' );
function images_css() {
echo '<style type="text/css">
#my-images .inside{padding:0px !important;margin:0px !important;}
.frame{
width:100%;
height:320px;
overflow:auto;
background:#e5e5e5;
padding-bottom:10px;
}
.field{width:800px;}
#results {
width:100%;
overflow:auto;
background:#e5e5e5;
padding:0px 0px 10px 0px;
margin:0px 0px 0px 0px;
}
#results img{
border:solid 5px #FDD153;
-moz-border-radius:3px;
margin:10px 0px 0px 10px;
}
.frame label{
margin:10px 0px 0px 10px;
padding:5px;
background:#fff;
-moz-border-radius:3px;
border:solid 1px #B5B5B5;
height:60px;
display:block;
float:left;
overflow:hidden;
}
.frame label:hover{
background:#74D3F2;
}
.frame label.checked{background:#FDD153 !important;}
.frame label input{
opacity:0.0;
position:absolute;
top:-20px;
}
.images_count{
font-size:10px;
color:#666;
text-transform:uppercase;
background:#f3f3f3;
border-top:solid 1px #ccc;
position:relative;
}
.selected_title{border-top:solid 1px #ccc;}
.images_count span{
color:#666;
padding:10px 6px 6px 12px;
display:block;
}
.count-selected{
font-size:9px;
font-weight:bold;
text-transform:normal;
position:absolute;
top:10px;
right:10px;
}
</style>';
}
add_action( 'admin_head-post.php', 'images_js' );
add_action( 'admin_head-post-new.php', 'images_js' );
function images_js(){?>
<script type="text/javascript">
jQuery(document).ready(function($){
$('.frame input').change(function() {
var values = new Array();
$("#results").empty();
var result = new Array();
$.each($(".frame input:checked"), function() {
result.push($(this).attr("value"));
$(this).parent().addClass('checked');
});
$('.field').val(result.join(','));
$('.count-selected').text('Selected: '+result.length);
$.each($(".frame input:not(:checked)"), function() {
$(this).parent().removeClass('checked');
});
});
var result = new Array();
$.each($(".frame input:checked"), function() {
result.push($(this).attr("value"));
$(this).parent().addClass('checked');
});
$('.field').val(result.join(','));
$('.count-selected').text('Selected: '+result.length);
$.each($(".frame input:not(:checked)"), function() {
$(this).parent().removeClass('checked');
});
});
</script>
<?}
function wps_thumbnails_list(){
global $post;
$image = get_post_meta($post->ID, '_link', true);
$image = explode(",", $image);
foreach($image as $images){
$url = wp_get_attachment_image_src($images, 1, 1);
echo '<a href="';
echo $url[0];
echo '" class="lightbox">';
echo wp_get_attachment_image($images,'thumbnail', 1, 1);
echo '</a>';
}
}
Adăugați acest fragment în bucla fișierului dvs. single.php pentru a afișa imaginile din postările sau paginile dvs.
<?
wps_thumbnails_list()
?>
Notă: Dacă este prima dată când adăugați secvențe de cod în WordPress, consultați ghidul nostru despre cum să copiați / lipiți corect secvențe de cod în WordPress, pentru a nu vă defecta accidental site-ul.
Dacă v-a plăcut acest fragment de cod, vă rugăm să luați în considerare verificarea altor articole de pe site, cum ar fi: 11 cele mai bune servicii de găzduire web gratuite și cum să migrați site-ul builder de la GoDaddy la WordPress.
există un motiv pentru codul jquery dublu?
Plugin grozav. Am încercat să recuperez pe pagină sau postare metadatele corespunzătoare fiecărei imagini fără succes. A descoperit cineva sau este posibil cu acest plugin?
Acest lucru vă va arăta cum să obțineți metadate,
http://wpsnipp.com/index.php/loop/display-attachment-thumbnail-with-image-metadata/
Obțin un ecran alb când includ acest cod în functions.php. Folosesc WP 3.8, există o soluție? 🙂 Aș dori să folosesc asta.
salut! Ce se întâmplă cu mai multe imagini atașate la o singură miniatură? Ajutați-mă, vă rog
Salut Kevin
Mă întrebam doar, în loc să afișez toate atașamentele din Biblioteca Media, există o modalitate de a afișa doar imaginile încărcate pentru fiecare postare la care sunt atașate?
Mulțumesc
Doar adăugați asta
‘post_parent’ => $post->ID
Sub
‘posts_per_page’ => -1,
Kevin, ai întâlnit ceva care permite încărcarea imaginilor pentru câmpurile de profil ale utilizatorilor. Am văzut câteva pluginuri premium și presupun că acest lucru trebuie făcut cu un JS similar, dar doar mă întrebam dacă ai întâlnit vreun cod pentru asta.
Te referi la ceva de genul încărcare avatar?
Mulțumesc, omule. Ușor de utilizat, așa cum este, sau un punct de plecare excelent pentru personalizare.
Super, mă bucur să aud asta, lucrez în prezent la o versiune plugin a acestui fragment care va suporta lucruri precum lazy load, previzualizare imagine popup etc. și o voi lansa gratuit în viitorul apropiat. Urmărește-mă pe Twitter sau Facebook, voi face un anunț despre asta.
Acesta este pur și simplu grozav. Ai menționat în comentariile postării unei versiuni actualizate, doar sunt curios dacă ai făcut-o deja sau nu? Mulțumesc pentru fragmentul grozav
Pare o funcție php grozavă. Poate că este doar computerul meu, dar mi se pare foarte lent, există vreo modalitate de a-l accelera?
Un început bun! Dar nu folosi $file->guid. Asta va distruge proporțiile. Folosește $thumbnail = wp_get_attachment_image_src($file->ID, ‘thumbnail’); și înlocuiește $file->guid cu $thumbnail[0] în schimb. Mult, mult mai bine!
Mulțumesc Jens, va trebui să postez o versiune actualizată cu sugestiile pe care le-am primit. Mă bucur să aud că îți place fragmentul,
Voiam doar să spun că am reușit în sfârșit, din nou, mulțumesc. Ajutorul tău este foarte apreciat 🙂
Nicio problemă, mă bucur să aud că ai reușit să rezolvi lucrurile corect.
Hmmm, nu eram conștient că partea “AT kevin” se va schimba într-un link de Twitter cu numele de utilizator „kevin”
Scuze pentru asta 🙂 Tocmai răspundeam la/către tine Kevin (Chard).
haha nicio problemă 🙂
@Kevin:twitter , wow, aceasta trebuie să fie ziua mea norocoasă, căutam ceva de genul acesta de ceva vreme! Sunt foarte recunoscător, mulțumesc! Va fi util și funcționează excelent, dar aș dori să știu cum să dezactivez opțiunea de selecție multiplă, vreau doar ca funcția să permită selectarea unui singur atașament 🙂
(Am editat deja pentru a afișa doar URL-ul/sursa, astfel încât să îl pot implementa în bucla temei)...
Schimbați doar acestea din casete de selectare în butoane radio, toate în cadrul aceluiași grup.
Kevin, mulțumesc, dar asta nu a funcționat, în primul rând, la selectarea unei imagini, aceasta selectează imaginea, dar dacă o altă imagine a fost deja selectată, nu o deselectează pe aceasta și încă afișează mai multe imagini în postare (nu este o problemă mare, dar este mai prietenos cu utilizatorul dacă un utilizator poate selecta o singură imagine :))
În al doilea rând, aș dori să știu dacă este posibil să afișăm dimensiunea imaginii în secțiunea alt sau title a , sau sub imaginea însăși, ca într-un span. Este acest lucru posibil cu acest fragment de cod? Am încercat următoarele:
(Știu că nu este corect :))
title=”””
Acest lucru ar trebui să funcționeze pentru tine, butoanele radio trebuie să aibă același name=”” altfel nu fac parte din același grup și ar funcționa ca o casetă de selectare.
http://pastebin.com/vF6mjyZL
Am făcut două versiuni, una care face o singură imagine din aceleași motive pe care le-ai putea avea, ambele ar trebui să funcționeze împreună, deși aceasta are niște cod comentat, dar ar trebui să funcționeze bine.
Ce am încercat:
title = “‘ ‘”
Bună ziua, domnule, pot spune că acesta este unul dintre cele mai bune fragmente de cod ale dumneavoastră? Poate !?
Mulțumesc, mă bucur să văd că vă place fragmentul de cod.