Jak utworzyć galerię albumów zdjęć w WordPress bez wtyczki?
Opublikowany: 2021-11-12
W tym artykule pokażemy, jak stworzyć galerię albumów zdjęć w WordPressie bez wtyczki.
Wszyscy wiemy, że dzięki wtyczkom w WordPressie nie ma rzeczy niemożliwych do osiągnięcia.
Ale im więcej wtyczek używasz, tym bardziej spada wydajność Twojej witryny.
Dla każdej strony internetowej galeria odgrywa bardzo ważną rolę.
Jeśli Twoja galeria obejmuje skomplikowane prace i filtry, wydajność całej witryny może pobić.
W galerii albumu fotograficznego ma się znajdować kilka zdjęć.
Tutaj tworzymy miesięczny album, aby każdy album miał obraz okładki, a po kliknięciu obrazu okładki zabierze Cię do wnętrza albumu, aby sprawdzić każde zdjęcie z osobna.
Musisz także wiedzieć, jak stworzyć galerię albumów zdjęć w WordPressie bez wtyczki , aby wykonać skomplikowane zadania, do których trzeba było kupić wtyczkę premium, jeśli chcesz korzystać z wtyczki.
Poza tym możesz użyć jednego z tych programów do edycji zdjęć, aby edytować zdjęcia, które zostaną dołączone do galerii albumu fotograficznego.
Kroki tworzenia galerii albumów zdjęć w WordPress bez wtyczki
Wszystkie funkcje wymagane do osiągnięcia celu można wykonać za pomocą wbudowanych funkcji WordPress. Traktuj każdy miesięczny album jako post z osobną stroną. Rozważ każdy obraz wewnątrz albumów jako załącznik z własną pojedynczą stroną.
Albumy będą wymagały miniatury, a funkcja jest wbudowana w WordPress. Jeśli Twoja witryna jest witryną fotografa, możesz zamienić posty domyślne za pomocą albumu. W przeciwnym razie musisz utworzyć niestandardowy typ posta.
Utwórz wtyczkę specyficzną dla witryny (nie gotową) i niestandardowy typ postu
Musisz utworzyć wtyczkę specyficzną dla witryny, która nie jest zależna od Twojego motywu. Są przydatne do tworzenia niestandardowych typów postów, dodawania skrótów, wyświetlania miniatur i tym podobnych. Aby utworzyć wtyczkę specyficzną dla witryny, musisz przejść do katalogu wtyczek za pomocą FTP.
W obszarze wp-content/plugins/ utwórz nowy folder i nazwij go taką samą nazwą jak wtyczka, którą chcesz utworzyć. Wejdź do folderu i utwórz plik php o tej samej nazwie co folder. Wklej następujący kod do pliku.
/* Nazwa wtyczki: Wtyczka witryny dla website.com Opis: zmiany w kodzie witryny dla witryny internetowej.com */ /* Rozpocznij dodawanie funkcji poniżej tej linii */ /* Przestań dodawać funkcje poniżej tej linii */
Zapisz plik i wyjdź. Powyższy kod nie ma żadnego znaczenia i zostanie zastąpiony po utworzeniu niestandardowego typu posta.
Wygeneruj kod dla niestandardowego typu postu z WordPress Custom Post Type Code Generator.
Wyświetlanie dodatkowych rozmiarów obrazu i dodatkowych pól–
Z panelu administracyjnego przejdź do Wygląd, a następnie do Edytora. Znajdź plik functions.php i dodaj następujący kod, aby zarejestrować dodatkowy rozmiar obrazu dla wyświetlania siatki.
add_image_size( 'siatka-albumu', 225, 150, prawda );
Jeśli chcesz dodać dodatkowe pola niestandardowe do Media Uploader, takie jak imię i nazwisko fotografa, jego strony i inne informacje podczas przesyłania obrazu, musisz dodać następujący kod w functions.php.
/**
* Dodaj pola nazwy fotografa i adresu URL do narzędzia do przesyłania multimediów
* @param $form_fields array, pola do uwzględnienia w formularzu załącznika
* @param $post object, zapis załącznika w bazie danych
* @return $form_fields, zmodyfikowane pola formularza
*/
function be_attachment_field_credit( $form_fields, $post ) {
$form_fields['nazwisko-fotografa'] = array(
'label' = 'Nazwisko fotografa',
'wejście' = 'tekst',
'value' = get_post_meta( $post-ID, 'be_photographer_name', true ),
'helps' = 'Jeśli podano, zostanie wyświetlony kredyt fotograficzny',
);
$form_fields['be-photographer-url'] = array(
'label' ='Adres URL fotografa',
'wejście' = 'tekst',
'value' =get_post_meta( $post-ID, 'be_photographer_url', true ),
'helps' = 'Dodaj adres URL fotografa',
);
zwróć $form_fields;
}
add_filter('attachment_fields_to_edit', 'be_attachment_field_credit', 10, 2 );
/**
* Zapisz wartości nazwy fotografa i adresu URL w programie do przesyłania multimediów
* @param $post array, dane postu dla bazy danych
* @param $attachment array, pola załączników z formularza $_POST
* @return $post array, zmodyfikowane dane postu
*/
function be_attachment_field_credit_save ( $post, $attachment ) {
if( isset( $attachment['nazwisko-fotografa'] ) )
update_post_meta( $post['ID'], 'być_fotografem', $attachment['być-fotografem'] );
if( isset( $attachment['be-photographer-url'] ) )
update_post_meta( $post['ID'], 'be_photographer_url', esc_url( $attachment['be-photographer-url']) ) );
return $post;
}
add_filter( 'attachment_fields_to_save', 'be_attachment_field_credit_save', 10, 2 );
Jak widać, doda dwa pola tekstowe w programie Media Uploader, a mianowicie nazwę fotografa i adres URL fotografa.
Tworzenie stron do wyświetlania wszystkich albumów
Teraz nadszedł czas, aby stworzyć kilka albumów (niestandardowe typy postów) i dodać do nich zdjęcia. Prezentowany obraz będzie okładką albumu. Treść, którą dodasz do obszaru treści posta, stanie się opisem albumu.
Strona szablonów dla albumów
Utwórz plik i nazwij go archive-albums.php. Skopiuj kod nagłówka, stopki, paska bocznego i innych elementów interfejsu użytkownika i wklej go. Wklej w nim następujący kod, aby wyświetlić wszystkie albumy na jednej stronie.
<li class="album-grid">a href=" title=""</a></li>
post_type == 'albumy' $post-post_status == 'opublikuj' ) {
$attachments = get_posts( array(
'post_type' = 'załącznik',
'posts_per_page' =-1,
'post_parent' =$identyfikator-poczty,
„wyklucz” = get_post_thumbnail_id()
) );
jeśli ( $załączniki ) {
foreach ( $attachments jako $attachment) {
$class = "mime po dołączeniu-" . sanitize_title ($attachment-post_mime_type );
$title = wp_get_attachment_link( $identyfikator załącznika, 'siatka-albumu', prawda );
echo '<li class="' . $class . 'album-grid">' . $tytuł . '</li>';
}
}
}
Umieść następujący kod w głównym pliku CSS swojego motywu, aby obrazy okładek były wyświetlane w siatce.
.album-grid{szerokość: 225px; wysokość: 150px; pływak: lewy; styl listy: brak; typ-listy: brak; margines: 0 18px 30px 0px;}
Strona szablonu dla każdego obrazu
Utwórz plik i nazwij go single-attachments.php. Skopiuj cały kod z gotowego pliku single.php motywu. Możesz go znaleźć w Edytorze w menu Wygląd. Następnie znajdź kod pętli w pliku single-attachments.php i zastąp tę sekcję następującą.
if ( have_posts() ): while ( have_posts() ): the_post();
$photographer = get_post_meta($post-ID, 'be_photographer_name', true);
$photographerurl = get_post_meta($post-ID, 'be_photographer_url', true);
<h1>tytuł();</h1>
<div class="photometa"><span class="photographername"> echo $photographer; </span> // <a href=" echo $photographerurl " target="_blank" class="photographerurl" rel="noopener noreferrer"> echo $photographerurl </a></div>
<div class="entry-attachment">
if ( wp_attachment_is_image( $post-id ) ): $att_image = wp_get_attachment_image_src( $post-id, "pełny");
<p class="załącznik"><a>id); " tytuł =" tytuł_(); " rel="załącznik"<img src="echo $att_image[0];" width=" echo $att_image[1];" height="echo $att_image[2];" class="medium-załącznika">wycinek_wpisu ;" /</a>
</p>
w przeciwnym razie :
<a>ID) " title=" echo wp_specialchars(get_the_title($post-ID), 1 )" rel="attachment"echo basename ($post-guid) </a>
endif;
</div>
koniec;
endif;