WordPressバックエンドの画像アップロード機能のサンプル解説、WordPressサンプル解説_PHPチュートリアル
- WBOYオリジナル
- 2016-07-12 09:00:511013ブラウズ
WordPressバックエンドの画像アップロード機能の事例解説、WordPress事例解説
画像アップロード
ファイルの準備: 新しい php ファイルを作成します。テストにはデフォルトのテーマ Twenty Ten を使用しました。まず、このテーマのフォルダーに新しいファイル -myfunctions.php を作成し、functions.php ファイルを開き、次のコードを追加します。一番下にある新しいファイルをロードします:
クラスのコードは次のとおりです:
リーリー後で背景設定ページを確認し、追加後のレンダリングを確認してください:
この時点で、テキストフィールドとアップロードボタンはすでに存在しますが、クリックしてもまだ効果はありません。クリック後にアップロードフレームをポップアップさせるには、jsコードも追加する必要があります。
管理を容易にするために、新しい js ファイルを作成し、twentyten テーマ フォルダーの下に新しいフォルダー js を作成し、このファイルの下に新しい Upload.js ファイルを追加します。 jsコードを追加:
リーリー次のステップは、js と css をロードすることです。
上記のクラスの display() 関数に次のコードを追加します。
後で背景設定ページのソースコードを表示すると、ソースコードのほぼ最後に読み込んだ js ファイルが表示されます。
さて、今から試してみましょう:
複数の画像アップロードフォーム
まずフォームを変更し、複数のアップロードボタンを追加し、画像を表示するための div コンテナを追加します。
上記のチュートリアルの JS コードは、テキスト フィールドの ID 値を通じて要素を取得しますが、HTML ドキュメント内で ID を同じにすることはできません。その場合、それぞれに対して JS を記述する必要があります。 form. 、これは非常に面倒なので、今日はフォームを変更し、クラスを通じてオブジェクトを取得するように js を変更します。
クラス内のdisplay()関数を次のように変更します(新しいashu_ico項目を追加し、アップロードボタンのid属性を削除してclass="ashu_bottom"に変更しました):
ここには新しい設定項目が追加されています。以前のデフォルトのデータ設定とデータの更新には、対応する追加が必要です。非常に簡単なので、ここでは詳しく説明しません。
新しい js コードを見てみましょう。エディタで Upload.js を開き、コードを次のように変更します。 リーリー
複数の画像のアップロードが実装されました。実際には非常に簡単です。 。
- Wordpress ThickBox 画像をクリックすると次の画像の修正方法が表示されます
- WordPressのバックエンドにトップレベルメニューとサブメニューを追加する機能を詳しく解説
- カスタマイズされたバックエンド管理WordPress のインターフェイスの配色 ヒント
- WordPress 編集の背景にプロンプトボックスを追加するためのコード例を共有する
- WordPress の記事にカスタムフィールドと背景編集機能領域を追加する
- いくつかの実践的な WordPress バックグラウンド MySQL 操作コマンドをまとめました