0

Edge Animate で作成した非常に基本的なファイルがあり、テキストをフェードインおよびフェードアウトするだけです。ここにあります：

http://www.threecell.com/demo/simpletext/simpletext.html

Edge Animate は、HTML ファイルと一部の JS ファイルをエクスポートします。私の質問は、将来、WordPress フレームワークを使用してテキストを更新できるようにすることが可能かどうかです。実際のテキストは、以下に投稿した JS ファイルの 1 つで宣言されていることがわかりました (問題のテキストは「THIS IS A TEST」です)。最終的に、この JS に入る WordPress ウィジェットを作成したいと思います。ファイルを開き、テキスト値を変更します。

ご支援やご指導をよろしくお願いいたします。

/**
 * Adobe Edge: symbol definitions
 */
(function($, Edge, compId){
//images folder
var im='images/';

var fonts = {};


var resources = [
];
var symbols = {
"stage": {
   version: "2.0.1",
   minimumCompatibleVersion: "2.0.0",
   build: "2.0.1.268",
   baseState: "Base State",
   initialState: "Base State",
   gpuAccelerate: false,
   resizeInstances: false,
   content: {
         dom: [
         {
            id:'Text',
            type:'text',
            rect:['131','190','auto','auto','auto','auto'],
            text:"THIS IS A TEST",
            font:['Arial, Helvetica, sans-serif',24,"rgba(0,0,0,1)","normal","none",""]
         }],
         symbolInstances: [

         ]
      },
   states: {
      "Base State": {
         "${_Stage}": [
            ["color", "background-color", 'rgba(255,255,255,1)'],
            ["style", "overflow", 'hidden'],
            ["style", "height", '400px'],
            ["style", "width", '550px']
         ],
         "${_Text}": [
            ["style", "top", '200px'],
            ["style", "opacity", '0'],
            ["style", "left", '197px']
         ]
      }
   },
   timelines: {
      "Default Timeline": {
         fromState: "Base State",
         toState: "",
         duration: 1500,
         autoPlay: true,
         timeline: [
            { id: "eid7", tween: [ "style", "${_Text}", "opacity", '1', { fromValue: '0'}], position: 0, duration: 1500 },
            { id: "eid4", tween: [ "style", "${_Text}", "left", '297px', { fromValue: '197px'}], position: 0, duration: 1500 },
            { id: "eid5", tween: [ "style", "${_Text}", "top", '193px', { fromValue: '200px'}], position: 0, duration: 1500 }         ]
      }
   }
}
};


Edge.registerCompositionDefn(compId, symbols, fonts, resources);

/**
 * Adobe Edge DOM Ready Event Handler
 */
$(window).ready(function() {
     Edge.launchComposition(compId);
});
})(jQuery, AdobeEdge, "EDGE-2538351");
4

1 に答える 1

1

プラグインを作成してWidgets_APIを使用する必要があります。

フロントエンドでは、ウィジェットは を使用wp_enqueue_scriptしてロードしますsimpletext_edgePreload.js。そして、テキスト値を JavaScript データとして で渡しますwp_localize_script。
最終的に、JS ファイルで次のようなものを使用できるようになりますtext:my_data.text。

ショートコードの例: Wordpress Javascript File SRC File Path .

ウィジェットの例:ウィジェットのスクリプト/スタイルシートを条件付きで HEAD にエンキューする

于 2013-09-18T22:56:15.727 に答える