リンクの挿入が出来ない

投稿の中にリンクを挿入する場合、指定を終わると投稿一覧に飛んでしまいリンクの挿入が出来なくなる事があります。

投稿編集画面の「画像の追加」や「リンクの挿入」といったボタンは、javascriptを利用して挿入ページを作成していますが、この作業用のjavascriptとそれ以外のプラグインのjavascriptが干渉して、挙動がおかしくなっていると考えられるので、可能性のあるプラグイン(リンクの挿入が出来ないと気付いた以前に有効化した)をさしあたり無効化して、挙動が変化するか観察します。

今回、「WP Multibyte Patch」というプラグインを無効化したらリンクの挿入が正しく行えるようになりました。

カテゴリー: WordPress, WP 機能 | タグ: , | コメントする

jQuery

ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするためのJavaScriptライブラリ、JavaScriptライブラリのデファクトスタンダード。
jQueryには次のような機能・特徴がある。
ブラウザに依存しないオープンソースのセレクタエンジン
DOM操作と変更
イベント
CSS操作
エフェクトとアニメーション
Ajax
ユーティリティ – ブラウザのバージョン取得、each関数など
拡張性 – jQuery プラグイン
出典:ウィキペディア

HTMLのDOMエレメントを検索し、それを操作するクロスブラウザのJavaScriptライブラリ。Ajaxを行う機能など、よく必要とされる処理を手軽に扱えるようにした関数群などもある。
出典:[JavaScript] jQueryの基本的な仕組み

カテゴリー: jQuery | コメントする

アプリケーションフレームワーク

プログラミングにおいて、特定のオペレーティングシステムのためのアプリケーションの標準構造を実装するのに使われるクラスやライブラリの集まりである。単にフレームワークとも呼ぶ。
多くの再利用可能なコードをフレームワークにまとめることによって、開発者の手間を省き、新たなアプリケーションのために標準的なコードを改めて書かなくて済むようにする。アプリケーションフレームワークはグラフィカルユーザインタフェース (GUI) が一般的になるに連れて一般化してきた。というのも、GUIはアプリケーションの基本的構造の標準化を促進する傾向があるためである。アプリケーションの基本コード構造が明らかであるため、標準フレームワークを使えば自動GUI作成ツールが作り易くなる。フレームワークの実装にはオブジェクト指向プログラミング技法が一般に使われ、あるアプリケーションの独自の部品がフレームワーク内の既存のクラスを継承することができる。
商用の最初のフレームワークとしてMacAppがある。アップルコンピュータがMacintosh向けに開発したものである。当初、拡張(オブジェクト指向化)されたPascal言語で書かれていたが、後にC++言語で書き直された。
出典:ウィキペディア

カテゴリー: IT用語 | コメントする

Ajax 【 Asynchronous JavaScript + XML 】

Webブラウザに実装されているJavaScriptのHTTP通信機能を使って、Webページのリロードを伴わずにサーバとXML形式のデータのやり取りを行って処理を進めていく対話型Webアプリケーションの実装形態。
従来、Webブラウザを使ったWebアプリケーションでは、データをサーバに通知して処理結果を得るにはページ全体をロードしなおさなければならず、ネイティブアプリケーションのような操作性を得ることは難しかった。Ajaxでは、指定したURLからXMLドキュメントを読み込む機能を使い、ユーザの操作や画面描画などと並行してサーバと非同期に通信を行うことで、サーバの存在を感じさせないシームレスなWebアプリケーションを実現することができる。

出典:IT用語辞典 e-Words          http://e-words.jp/w/Ajax.html

 

ウェブブラウザ内で非同期通信とインターフェイスの構築などを行う技術の総称[4]XMLHttpRequestHTTP通信を行うためのJavaScript組み込みクラス)による非同期通信を利用し、通信結果に応じてダイナミックHTMLで動的にページの一部を書き換えるというアプローチを取る[5]。ウェブブラウザ内で非同期通信とインターフェイスの構築などを行う技術の総称。XMLHttpRequest(HTTP通信を行うためのJavaScript組み込みクラス)による非同期通信を利用し、通信結果に応じてダイナミックHTMLで動的にページの一部を書き換えるというアプローチを取る。
従来のWebアプリケーションでは、サーバにリクエストを送信後、レスポンスを新たにウェブページとして受け取ることで画面遷移が発生していたが、Ajaxにより画面遷移を伴わない動的なWebアプリケーションの製作が実現可能になる[1]。 例えばWeb検索に応用することで、従来は入力確定後に行っていた検索を、ユーザがキー入力をする間にバックグラウンドで行うことによってリアルタイムに検索結果を表示していくといったことが可能になる。
従来の技術の組み合わせであるため、Webブラウザ間のDHTMLの実装の違いをコードで吸収する必要があるなどの問題があり、jQueryなどのアプリケーションフレームワークを利用することで、こうした問題を解決している。

出典:ウィキペディア       http://ja.wikipedia.org/wiki/Ajax

カテゴリー: Ajax | コメントする

IEハイジャッカー修復

自分のサイトにユーザを引き込むために、誰でも使う検索ツールの検索エンジンやホームページの設定を書き換えてしまうブラウザハイジャッカーが後を絶ちません。
そのような場合の修復は
1. IEの[ツール]-[インターネット オプション]をクリック
2. <インターネット オプション>ウインドウのホームページ設定を希望のURLに変更
3. 同じく検索設定を[設定]で、<アドオンの設定と管理>を開き、検索プロバイダーを開く
4. 検索プロバイダとして希望でないプロバイダが設定されていれば、既定状態を外した上で、[削除]する。

カテゴリー: PC メンテナンス | タグ: , | コメントする

XXX_edge.jsとEdge Runtimeの関係

XXX_edge.jsはアニメーションとシンボルや(シンボルになっていないHTML)要素の定義を行い、定義内容をEdge Runtimeに渡すこと。どのようにDOM要素を生成するか、動きを与えるかという振る舞いを定義しています。
つまりコンポジションを作成するとは、Edge Runtimeに渡す予定の振る舞いを定義した依頼書を作成すること。

実際のDOMを生成したり、動きを与えたりするのは全てEdge Runtimeであり、XXX_edge.jsの依頼に基づいてDOM要素を作り、動きを与えます。しかしEdge Runtime自体が提供している機能はシンボルに対する事がほとんどで、シンボル以外に対して行う、つまりDOM要素自体の処理は実際にはjQueryが担当しています。

カテゴリー: Adobe アニメート | タグ: , , | コメントする

Edge Animate の全体像

An01

 

出典:Edge Animate 標準ガイドブック Part3

カテゴリー: Adobe アニメート | コメントする

WordPress内でHTMLソースなどを表示

SyntaxHighlighterのプラグインを導入する。
SyntaxHighlighterのプラグインは各種あり、使用法がそれぞれ異なるので、ここではSyntaxHighlighter Evolvedを追加した場合を説明する。
 

記事内へのソースの記述
ソース部分を[言語名] ソース[/言語名]と言語名(略称含む)で囲って投稿に記述。

<具体例 – htmlの場合>
挿入したいソース:
<p id=”pagetop”><a href=”#top”>Page Top</a></p>
 

ソースを追加する為の加工:
[html]
<p id=”pagetop”><a href=”#top”>Page Top</a></p>
[/html]
 

実際の記事表示:

<p id="pagetop"><a href="#top">Page Top</a></p>

  

<他の言語の場合の記述>
CSS:
[css]
CSSソース
[/css]

結果は

div#sample2 {
box-shadow: 5px 5px 10px 5px #000;
   -moz-box-shadow: 5px 5px 10px 5px #000;
   -webkit-box-shadow: 5px 5px 10px 5px #000;
/* 水平方向、水平方向、垂直方向、ぼかし距離、広がり距離、色 */

 

Javascript:
[js]
ソースコード
[/js]

結果は

document.onkeypress = keyPress;
e = event.keyCode;
window.status = "key=" + e;
window.alert(window.status);

  

そのほかの言語名及び言語略称
[xml]ソースコード[/xml]
[php]ソースコード[/php]
[shell]ソースコード[/shell]
[c]ソースコード[/c]
[c#]ソースコード[/c#]
[jscript]ソースコード[/jscript]
[javascript]ソースコード[/javascript]
[perl]ソースコード[/perl]
[Perl]ソースコード[/Perl]
[text]ソースコード[/text]
[sql]ソースコード[/sql]
[vb]ソースコード[/vb]

 
注意)ソースコードの入力
コード部分をMS Wordから新規投稿のビジュアルタブに貼り付けると、ビジュアルタブの表示では1行づつでも、サイトに公開すると改行コードの違いから下記のように行間が余計に開いたり、不要な<P>タグが挿入されたりする。


document.onkeypress = keyPress;

e = event.keyCode;

window.status = "key=" + e;

window.alert(window.status);

そのような時はWordデータを一度メモ帳に貼り、余分な改行を削除してから貼りなおすか、Wordpressの新規投稿をビジュアルではなくテキストタグで余分な改行を削除する。
 
参考サイト:
WordPress.org Plugin Directory SyntaxHighlighter Evolved
http://wordpress.org/plugins/syntaxhighlighter/
 
ワードプレスにソースコードを表示させるプラグイン【SyntaxHighlighter】
http://www.moco358.com/archives/480
 
ソースコードをそのまま表示!WordPressプラグイン「SyntaxHighlighter」で出来ること
http://xinome.net/2013/04/syntax_highlighter/

 

 

カテゴリー: WordPress, WP 機能 | タグ: , , , , , | WordPress内でHTMLソースなどを表示 はコメントを受け付けていません

階層メニューの作成

固定ページも投稿用のカテゴリーページも同じ方法でメニューの構造を作り上げます。

1.[外観]-[メニュー]-[カテゴリー]で追加するwp_menu01
メニューにチェックを入れ[メニューに追加]   をクリック

2.追加したメニューが右のメニュー構造のwp_menu02
最後に追加される

3.追加したメニューをドラッグして目的のwp_menu02
親メニューの下にドロップする

4.メニューが希望の親メニューの下に位置wp_menu04
付いたら[メニューを保存]をクリック

5.追加したメニューが階層構造表示されるwp_menu05

カテゴリー: WordPress, サイト、ページの作成 | タグ: | コメントする

jQuery シンボルインスタンスの関数

sym.$(elementName)

elementName – jQuery ハンドルを返すエレメント。
説明: シンボルインスタンスにスコープされた、指定のエレメント名に対して jQuery ハンドルを返します。


sym.$(“intro_Text1”).hide();

createChildSymbol

sym.createChildSymbol(symbolName, parentElementName, index ) symbolName – シンボル定義の名前。 parentElementName – このシンボルのインスタンスの定義エレメントの名前。
index – parentElementName の子の中の新規インスタンスの Z インデックス。
説明: 新しいシンボルインスタンスを、シンボルにスコープされた parentElementName の指定エレメントの子として、他の子とともに index の位置に作成します。 index が null または undefined の場合、シンボルは親エレメントの子に追加されます。
シンボルのスコープ内の parentElementName の下に作成されるシンボルインスタンスオブジェクトを返します。


// ステージで新規シンボル “kitten_paw” を作成します
sym.createChildSymbol(“kitten_paw”, “Stage”);
// シンボルを参照します
var kitten_sym = kitten_paw.getSymbolElement();
// 不透明度を 0 にアニメートします
kitten_sym.animate({opacity: 0}, 500);

setVariable

sym.setVariable ( varName, varValue )
varName 設定される変数を指定する文字列。
varValue 設定される値。 値のタイプは問いません。
説明: 指定された値に指定のパラメーターを設定します。


// 配列や関数などのあらゆるデータ型を変数に設定できます
sym.setVariable(“myNum”, 0);
sym.setVariable(“myBool”, true);
var arr = new Array(“foo”,”bar”,”baz”);
sym.setVariable(“myArr”, arr);
function localFunction () {
console.log(“myFunction called”);
}
sym.setVariable(“myFunction”, localFunction);

getVariable

sym.getVariable ( varName )
varName 取得される変数を指定する文字列。
説明: 指定の変数の値を返します。変数が見つからなかった場合は、undefined を返します。


mylocalVar = sym.getVariable(“myVar”);

getSymbolElement

sym.getSymbolElement()
説明: このシンボルインスタンスオブジェクトの DOM エレメントに jQuery ハンドルを返します。


// ステージで新規シンボル “kitten_paw” を作成します
sym.createChildSymbol(“kitten_paw”, “Stage”);
// シンボルを参照します
var kitten_sym = kitten_paw.getSymbolElement();
// 不透明度を 0 にアニメートします
kitten_sym.animate({opacity: 0}, 500);

参考:animate( properties, options ) - アルファシス:alphasis.info

出典:Adobe Edge Animate CC  JavaScript API 2.0

カテゴリー: Adobe アニメート | タグ: , , , | コメントする