サポート » 使い方全般 » フロント側からアイキャッチ画像を削除したい。

  • 解決済 d.w.c

    (@dwc-1)


    ACFのプラグインを利用して、寄稿者アカウントでログインしているメンバーはフロントエンド側から既存の記事内容の編集ができるようにしています。

    ただ、アイキャッチ画像に関して操作するのはACF上では不可能なため、アイキャッチを削除するボタンもしくはリンクを個別に作成してphpテンプレートに貼り付けたいと思っています。
    アイキャッチの登録は自動で行うので、削除のみできれば大丈夫です。

    通常の編集画面にはログインしてほしくない(そもそも編集画面はアクセスできない仕様にしてある)ため、フロント側から操作できるようにしたいのですが、
    編集ページの「アイキャッチ画像を削除する」のリンク先は「http://***/wp-admin/post.php?post=ポストID&action=edit#」となっているため、このまま使用すると編集画面へのリダイレクトとなってしまうためにこのままでは使えません。

    編集画面へアクセスさせず、ボタンもしくはリンクを押しただけでアイキャッチ画像を削除させるような機構を作成することは可能でしょうか?

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • 要望の結果によりけりじゃないんですか。
    非表示でもよければJQueryとかでcssのdisplay:noneでもOKなんでしょうか。
    できるかできないかとかスクリプトの例示とかできませんが。

    トピック投稿者 d.w.c

    (@dwc-1)

    非表示ではなく、削除が必要です。
    アイキャッチを再登録するために前の写真を消すという意味です。

    Front-end Editor for WordPress
    作者がwordpressから足を洗ったようなので、3年ぐらい更新されていないプラグインだけど、
    対象とする項目が細分化されてサムネイル単独でも編集できるようだから、
    ソースのコードをたどっていけば参考になるかもしれませんね。、

    こんにちは

    このコードは一度もテスト/実行していないので、参考程度にお願いします。

    function my_remove_thumbnail(){
    	if(!empty($_POST['del_thumbnail']) && !empty($_POST['my_post_id'])){
    		delete_post_meta($_POST['my_post_id'], '_thumbnail_id')
    	}
    }
    add_action('init', 'my_remove_thumbnail', 1);

    前提として、更新ボタンか何かでPOSTされることにしています。

    更新時にinitフックが実行されることを想定しています。
    別のフックやイベントが良い場合はそれに変更してください。

    また、削除するかどうかはチェックボックス’del_thumbnail’に設定されており、投稿のIDが’my_post_id’に入っていてPOSTされる前提になっています。

    本当は、投稿のアップデートが完了してから実行されることが望ましいです。
    投稿の更新がエラーになっているのにサムネイルだけ削除された、という現象を回避するためです。

    ajaxでサクっと消えたらいいかもしれませんが、手を抜いてしまいました・・・

    トピック投稿者 d.w.c

    (@dwc-1)

    コードも考えていただいてありがとうございます!
    すぐに返信したつもりだったのですが投稿できていませんでした、すみません。
    説明が言葉足らずだったので追記させていただきます。

    現状ではabcというカスタム投稿タイプの、custom_imgというカスタムフィールドにアップロードした画像を公開時に自動で読み込んでアイキャッチに設定するようになっています。
    これはプラグインではなく、functions.phpにコードを記述しています。
    ただこの状態だと一度custom_imgに画像を設定して更新すると、その後custum_imgの画像を変更してもアイキャッチは最初のものから変わらないようです。

    なので、abcというカスタム投稿タイプが更新されるたびに「現在のアイキャッチを削除→custum_imgの画像をアイキャッチに設定」という流れが自動で起きるようにしたいのです。
    これは可能でしょうか?

    フロントエンド側で編集している状態からアイキャッチ画像を削除すればいいということでしょうか?
    この場合、やはり ajax を使用することになりそうですね。
    文章で説明すると長くなりそうなのでコードそのものをご覧ください。

    functions.php 等に

    function ajax_frontend_remove_post_thumbnail() {
    	$post_id = intval( $_POST['post_id'] );
    	check_ajax_referer( 'frontend_remove_post_thumbnail-' . $post_id );
    	if ( delete_post_thumbnail( $post_id ) ) {
    		die( '<p>アイキャッチ画像を削除しました。</p>' );
    	}
    	die( '0' );
    }
    add_action( 'wp_ajax_frontend-remove-post-thumbnail', 'ajax_frontend_remove_post_thumbnail' );
    
    function frontend_remove_post_thumbnail_link() {
    	global $post;
    ?>
    <script type="text/javascript">
    var ajaxurl = '<?php echo admin_url( 'admin-ajax.php'); ?>';
    var MyRemoveThumbnail;
    (function($) {
      MyRemoveThumbnail = function(id, nonce) {
        $.post(ajaxurl, {
          action: 'frontend-remove-post-thumbnail',
          post_id: id,
          _ajax_nonce: nonce
        }, function(str) {
          if (str == '0') {
            alert('アイキャッチ画像を削除できませんでした。');
          } else {
            $('#frontend-remove-post-thumbnail').html(str);
          }
        }
        );
      };
    }(jQuery));
    </script>
    <?php
    	$post_id = $post->ID;
    	$ajax_nonce = wp_create_nonce( 'frontend_remove_post_thumbnail-' . $post_id );
    	echo '<div id="frontend-remove-post-thumbnail">';
    	if ( has_post_thumbnail($post_id) ) {
    		echo '<a href="#" id="remove-post-thumbnail" onclick="MyRemoveThumbnail(\'' . $post_id . '\',\'' . $ajax_nonce . '\');return false;">アイキャッチ画像を削除</a>';
    	} else {
    		echo '<p>アイキャッチ画像は設定されていません。</p>';
    	}
    	echo '</div>' . "\n";
    }
    

    テンプレート等に

    <?php frontend_remove_post_thumbnail_link(); ?>

    なお、このコードは試していませんのでエラーがでるかもしれません。またかなり大雑把で細かいことは無視しています。参考程度にしてください。

    • この返信は7年、 6ヶ月前にishitakaが編集しました。
    トピック投稿者 d.w.c

    (@dwc-1)

    >ishitakaさん

    すごい!
    求めていた結果が手に入りました!ありがとうございます!!!

    今回教えていただいたのをもとに、ajaxを勉強してみようと思います。

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • トピック「フロント側からアイキャッチ画像を削除したい。」には新たに返信することはできません。