プラグインなしでWordPressでフォトアルバムギャラリーを作成する方法

この記事では、プラグインを使用せずにWordPressでフォトアルバムギャラリーを作成する方法を紹介します。

WordPressのプラグインでは、達成することが不可能なことは何もないことは誰もが知っています。

ただし、使用するプラグインが多いほど、Webサイトのパフォーマンスが低下します。

どのウェブサイトでも、ギャラリーは非常に重要な役割を果たします。

ギャラリーに複雑な作業やフィルターが含まれている場合、Webサイト全体のパフォーマンスが打撃を受ける可能性があります。

フォトアルバムギャラリーには、その中にいくつかの写真が存在することになっています。

ここでは、すべてのアルバムにカバー画像があり、カバー画像をクリックするとアルバム内に移動して各写真を個別にチェックできるように、月次アルバムを作成しています。

プラグインを使用したい場合にプレミアムプラグインを購入する必要がある複雑なタスクを実行するには、プラグインなしでWordPressでフォトアルバムギャラリーを作成する方法も知っておく必要があります。

さらに、これらの写真編集ソフトウェアの1つを使用して、フォトアルバムギャラリーに添付される写真を編集できます。

プラグインなしでWordPressでフォトアルバムギャラリーを作成する手順

目的を達成するために必要なすべての機能は、WordPressの組み込み機能を使用して実行できます。 毎月のアルバムを、独自の単一ページを持つ投稿と見なします。 アルバム内の各画像は、独自の単一ページの添付ファイルと見なしてください。

アルバムにはサムネイルが必要で、この機能はWordPressに組み込まれています。 あなたのウェブサイトが写真家のウェブサイトである場合、あなたはアルバムであなたのデフォルトの投稿を変えることができます。 それ以外の場合は、カスタム投稿タイプを作成する必要があります。

サイト固有のプラグイン（既製ではない）とカスタム投稿タイプを作成する

テーマに依存しないサイト固有のプラグインを作成する必要があります。 カスタム投稿タイプの作成、ショートコードの追加、サムネイルの表示などに役立ちます。 サイト固有のプラグインを作成するには、FTPを使用してpluginsディレクトリに移動する必要があります。

wp-content / plugins /の下に新しいフォルダーを作成し、作成するプラグインと同じ名前をフォルダーに付けます。 フォルダ内に移動し、フォルダと同じ名前のphpファイルを作成します。 次のコードをファイル内に貼り付けます。

/ *
プラグイン名：website.comのサイトプラグイン
説明：website.comのサイト固有のコード変更
* /
/ *この行の下に関数の追加を開始します* /
/ *この行の下に関数を追加するのをやめます* /

ファイルを保存して終了します。 上記のコードには意味がなく、カスタム投稿タイプの作成時に置き換えられます。

WordPressカスタム投稿タイプコードジェネレーターからカスタム投稿タイプのコードを生成します。

追加の画像サイズと追加のフィールドの表示–

管理ダッシュボードから、[外観]、[エディター]の順に移動します。 ファイルfunctions.phpを見つけて、グリッド表示の追加の画像サイズを登録するための次のコードを追加します。

add_image_size（ 'album-grid'、225、150、true）;

写真家の名前、写真家のページ、画像をアップロードする際のその他の情報など、メディアアップローダーにカスタムフィールドを追加する場合は、functions.phpに次のコードを追加する必要があります。

/ **
 *写真家の名前とURLフィールドをメディアアップローダーに追加します
 * @param $ form_fields配列、添付フォームに含めるフィールド
 * @param $ postオブジェクト、データベースの添付ファイルレコード
 * @return $ form_fields、変更されたフォームフィールド
 * /

function be_attachment_field_credit（$ form_fields、$ post）{
    $ form_fields ['be-photographer-name'] = array（
        'label' = '写真家の名前'、
        '入力' = 'テキスト'、
        'value' = get_post_meta（$ post-ID、 'be_photographer_name'、true）、
        'helps' = '提供されている場合、写真のクレジットが表示されます'、
    ）;
    $ form_fields ['be-photographer-url'] = array（
        'label' = '写真家のURL'、
        '入力' = 'テキスト'、
        'value' = get_post_meta（$ post-ID、 'be_photographer_url'、true）、
        'helps' = '写真家のURLを追加'、
    ）;
    $ form_fieldsを返します;
}
add_filter（ 'attachment_fields_to_edit'、 'be_attachment_field_credit'、10、2）;

/ **
 *写真家の名前とURLの値をメディアアップローダーに保存します
 * @param $ post配列、データベースの投稿データ
 * @param $ attachment配列、$ _ POSTフォームの添付ファイルフィールド
 * @return $ post配列、変更された投稿データ
 * /
function be_attachment_field_credit_save（$ post、$ attachment）{
    if（isset（$ attachment ['be-photographer-name']））
        update_post_meta（$ post ['ID']、 'be_photographer_name'、$ attachment ['be-photographer-name']）;
    if（isset（$ attachment ['be-photographer-url']））
update_post_meta（$ post ['ID']、 'be_photographer_url'、esc_url（$ attachment ['be-photographer-url']））;
    $ postを返します。
}
add_filter（ 'attachment_fields_to_save'、 'be_attachment_field_credit_save'、10、2）;

ご覧のとおり、メディアアップローダーにフォトグラファー名とフォトグラファーURLの2つのテキストフィールドが追加されます。

すべてのアルバムを表示するページを作成する

次に、いくつかのアルバム（カスタム投稿タイプ）を作成し、それらに写真を追加します。 注目の画像はアルバムの表紙画像になります。 投稿のコンテンツ領域に追加したコンテンツは、アルバムの説明になります。

アルバムのテンプレートページ

ファイルを作成し、archive-albums.phpという名前を付けます。 ヘッダー、フッター、サイドバー、およびその他のUI要素のコードをコピーして貼り付けます。 次のコードを貼り付けて、すべてのアルバムを1ページに表示します。

<li class = "album-grid"> a href = "title =" "</a> </ li>
post_type == 'アルバム' $ post-post_status == 'publish'）{
        $ attachments = get_posts（array（
            'post_type' = '添付ファイル'、
            'posts_per_page' = -1
            'post_parent' = $ post-ID、
            '除外' = get_post_thumbnail_id（）
        ））;
        if（$ attachments）{
            foreach（$ attachments as $ attachment）{
                $ class = "添付後のmime-"。 sanitize_title（$ attachment-post_mime_type）;
                $ title = wp_get_attachment_link（$ attachment-ID、 'album-grid'、true）;
                echo '<li class = "'。$class。'album-grid"> '。 $ title。 '</ li>';
            }           
        }
    }

テーマのメインCSSファイルに次のコードを配置して、カバー画像がグリッドに表示されるようにします。

.album-grid {width：225px; 高さ：150px; フロート：左; リストスタイル：なし; list-style-type：なし; マージン：0 18px 30px 0px;}

各画像のテンプレートページ

ファイルを作成し、single-attachments.phpという名前を付けます。 テーマのビルド済みのsingle.phpからすべてのコードをコピーします。 これは、[外観]メニューの[エディター]の下にあります。 次に、single-attachments.phpでループコードを見つけて、そのセクションを次のように置き換えます。

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> the_title（）; </ 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、 "full"）; 
                        <p class = "attachment"> <a> id）; "title =" the_title（）; "rel =" attachment "<img src =" echo $ att_image [0]; "width =" echo $ att_image [1]; "height =" echo $ att_image [2]; "class =" attachment-medium "> post_excerpt ; " / </a>
                        </ p>
 それ以外 ：
                        <a> ID） "title =" echo wp_specialchars（get_the_title（$ post-ID）、1） "rel =" attachment "echo basename（$ post-guid）</a>
 endif; 
                        </ div>
 終わり; 
 endif;