Adăugați o coloană de imagine reprezentativă în Panoul de control WordPress

Doriți să vedeți imaginea reprezentativa a articolelor în articolepanoul de control WordPress? Imaginile vă oferă o privire de ansamblu mai bună și, de asemenea, vedeți imediat unde lipsește imaginea reprezentativă. Adaug întotdeauna imaginea postării la sfârșit, astfel încât să pot recunoaște postările neterminate.

Cum inserez imaginea prezentată în WP Admin?

Acest articol vă va arăta cum să adăugați o coloană cu imaginea prezentată în administratorul WordPress .

Există trei moduri diferite de a adăuga această nouă coloană la prezentarea generală a postării:

• Lipiți codul în functions.php
• Lipiți codul într-un plugin precum Code Snippets
• Utilizați un plugin gata făcut

Mai întâi voi arăta varianta în care adăugați codul în functions.phpfișierul dvs., deoarece aceasta este varianta pe care o folosesc și eu. De asemenea, economisești cele mai multe resurse în acest fel, deoarece codul face doar ceea ce este necesar.

Codul de coloană a imaginii prezentate

În primul rând, trebuie să utilizați add_image_size pentru a seta lățimea și înălțimea dorite a miniaturii imaginii postate. În codul exemplu, am ales 60px . Astfel imaginea se potrivește frumos în tabel.

Apoi ne străduim pentru filtrele WordPress manage_posts_columnsși manage_pages_columns, cu care extindem lista de postări și pagini cu o coloană. În cazul nostru, am etichetat noua coloană „ Imagine ”. WordPress va traduce asta în fiecare limbă.

Dacă doriți miniaturile numai pe postări sau pagini, puteți pur și simplu să omiteți declarația add_filter .

/**
 * Adauga coloana pentru imagine reprezentativa in panoul de control WP Admin pentru tabelele de Articole si Pagini
 */

// Seteaza dimensiunea imaginii 80x80 px
add_image_size( 'academiawp_admin-featured-image', 80, 80, false );

// Adauga coloanele la Articole si Pagini folosind add_filter. Aceeasi functie pentru ambele.
add_filter('manage_posts_columns', 'academiawp_add_thumbnail_column', 2);
add_filter('manage_pages_columns', 'academiawp_add_thumbnail_column', 1);
function academiawp_add_thumbnail_column($academiawp_columns){
  $academiawp_columns['academiawp_thumb'] = __('Image');
  return $academiawp_columns;
}

Interogați și introduceți imaginea recomandată

Nu putem folosi o coloană nouă fără date și conținut. Deci acum trebuie să atribuim o valoare coloanei academiawp_thumb .
Pentru a face acest lucru, avem nevoie de cârligele de acțiune WordPress numite manage_posts_custom_columnși manage_pages_custom_column.

În primul rând, încă întreb dacă articolul are o imagine de post atribuită. Dacă nu, funcția este terminată cu un break.
Dacă este prezentă o imagine, adresa imaginii este interogată și scoasă cu o etichetă <img>.

// Adauga imaginea thumbnail in tabelul WP Admin.
add_action('manage_posts_custom_column', 'academiawp_show_thumbnail_column', 5, 2);
add_action('manage_pages_custom_column', 'academiawp_show_thumbnail_column', 5, 2);
function academiawp_show_thumbnail_column($academiawp_columns, $academiawp_id){
  switch($academiawp_columns){
    case 'academiawp_thumb':
    if( function_exists('the_post_thumbnail') )
      echo the_post_thumbnail( 'academiawp_admin-featured-image' );
    break;
  }
}

Mutați imaginea la începutul tabelului

Dacă tocmai aș fi adăugat noua coloană, ar fi atașată la sfârșit. Nu-mi place asa, vreau ca imaginea reprezentativă să fie chiar de la începutul rândului.

Așa că am reconstruit din $columns nou matricea cu toate coloanele și am pus coloana academiawp_thumb chiar la început înainte de titlu.

// Muta noua coloana la inceputul randului.
add_filter('manage_posts_columns', 'academiawp_column_order');
function academiawp_column_order($columns) {
  $n_columns = array();
  $move = 'academiawp_thumb'; // which column to move
  $before = 'title'; // move before this column

  foreach($columns as $key => $value) {
    if ($key==$before){
      $n_columns[$move] = $move;
    }
    $n_columns[$key] = $value;
  }
  return $n_columns;
}

Reglați lățimea coloanei

Nu în ultimul rând, ajustez lățimea coloanei. Fără o limită, coloana ar avea o lățime de aproximativ 300 de pixeli, ceea ce ar fi mult prea mult.

// Formateaza latimea coloanei folosind CSS
add_action('admin_head', 'academiawp_add_admin_styles');
function academiawp_add_admin_styles() {
  echo '<style>.column-academiawp_thumb {width: 80px;}</style>';
}

Acum veți putea vedea imaginea postării în panoul de control WordPress.

Codul Complet

/**
 * Adauga coloana pentru imagine reprezentativa in panoul de control WP Admin pentru tabelele de Articole si Pagini
 */

// Seteaza dimensiunea imaginii 80x80 px
add_image_size( 'academiawp_admin-featured-image', 80, 80, false );

// Adauga coloanele la Articole si Pagini folosind add_filter. Aceeasi functie pentru ambele.
add_filter('manage_posts_columns', 'academiawp_add_thumbnail_column', 2);
add_filter('manage_pages_columns', 'academiawp_add_thumbnail_column', 2);
function academiawp_add_thumbnail_column($academiawp_columns){
  $academiawp_columns['academiawp_thumb'] = __('Image');
  return $academiawp_columns;
}
 
// Adauga imaginea thumbnail in tabelul WP Admin.
add_action('manage_posts_custom_column', 'academiawp_show_thumbnail_column', 5, 2);
add_action('manage_pages_custom_column', 'academiawp_show_thumbnail_column', 5, 2);
function academiawp_show_thumbnail_column($academiawp_columns, $academiawp_id){
  switch($academiawp_columns){
    case 'academiawp_thumb':
    if( function_exists('the_post_thumbnail') )
      echo the_post_thumbnail( 'academiawp_admin-featured-image' );
    break;
  }
}

// Muta noua coloana la inceputul randului.
add_filter('manage_posts_columns', 'academiawp_column_order');
add_filter('manage_pages_columns', 'academiawp_column_order');
function academiawp_column_order($columns) {
  $n_columns = array();
  $move = 'academiawp_thumb'; // which column to move
  $before = 'title'; // move before this column

  foreach($columns as $key => $value) {
    if ($key==$before){
      $n_columns[$move] = $move;
    }
    $n_columns[$key] = $value;
  }
  return $n_columns;
}

// Formateaza latimea coloanei folosind CSS
add_action('admin_head', 'academiawp_add_admin_styles');
function academiawp_add_admin_styles() {
  echo '<style>.column-academiawp_thumb {width: 80px;}</style>';
}

Varianta 1: functions.php

Modificările le putem facem într-un fișier special din tema activă. Recomand utilizarea unei teme copil (child-theme).

Folosind un client FTP precum Filezilla , puteți descărca acest fișier și îl puteți edita cu un editor de text .

Copiați cele patru fragmente de mai sus SAU codul complet în fișierul functions.php, salvați și încărcați din nou fișierul prin FTP.

Gata

Varianta 2: Cu ajutorul modulul Code Snippets

Instalați și activați modulul Code Snippets.

Creati un Snippet (Fragment) nou.

1. Introduceți Titlul acestui fragment
2. Introduceti codul complet de mai sus
   IMPORTANT: Fragmentul de cod trebuie sa inceapă cu tag-ul <?php si să se termine cu tag-ul ?>
3. Bifați opțiunea „Only run in administration area” (Execută numai în zona de administrare )
4. Faceți clic pe „Save changes and Activate” (Salvați modificările și activați ).

Navigați la pagina de Articole sau Pagini și veți vedea noua coloana cu imaginea reprezentativa.

Varianta 3: folosind module WordPress

Dacă nu știi să folosești un editor de text și ceva PHP, există și câteva plugin-uri gata de utilizare care îți oferă aceleași funcții ca și fragmentul de cod.

Featured Image Admin Thumb

Acest plugin vine cu majoritatea caracteristicilor. Din păcate, miniatura prezentată este afișată în ultima coloană. Dar ceea ce mi se pare bine este caracteristica de a seta o imagine prezentată direct în lista de postări. Concurenții nu pot face asta.

Featured Image Admin Thumb este disponibil gratuit din directorul de pluginuri wordpress.org.

WEN Featured Image

WEN Featured Image vă ajută să gestionați imaginea recomandată pentru postările sau paginile dvs. într-un mod simplu. Imaginea recomandată este afișată în coloana separată din listări. 

Concluzie

Dacă știți ce este fișierul functions.php și cum să introduceți cod suplimentar în el, cel mai simplu mod este descris în partea de sus a articolului.
În acest fel, nu trebuie să instalați un plugin suplimentar și aveți control deplin asupra noilor funcții.

Pentru cititorii mai puțin tehnici, pluginurile sunt potrivite. Instalați direct de la panoul de control WordPress și bucurați-vă de noua caracteristică.