SamsPcbLabパート2：WP、CSS、PHP、PCB

同じ道をたどる人々に役立つかもしれないニュアンスのいくつかに焦点を当てて、Web開発の最初の知識なしにWordPress（WP）でPCB開発者向けのプラットフォームを開発した経験をできるだけ簡単に説明しようと思います。また、何かおかしなことがあったら、専門家のアドバイスを喜んで聞きます。私は、ハブレのプログラマーのやや強力なコミュニティを知っています。WPについての縮小された投稿を見たとき、WPに対する態度を理解し、原則として、そのようなソリューションの次善の策を理解しています。しかし、それでも、プラグインを1つだけ支払うだけで、3か月で機能を実装できました。研究所の友人によると、そのサードパーティの開発には数十万ルーブルとさらに多くの時間がかかる可能性があります。そこで、プロジェクトのパイロットバージョンから始めることにしました。そこからさらに構築することが可能になります-たとえば、サードパーティ開発の技術仕様として。





タスクは、次の機能を備えたPCB開発者向けのプラットフォームを作成することでした。

• 特定の計算のパフォーマンスを簡素化する計算機。
• 印刷回路基板の開発のための知識ベース。
• 集合ブログ;
• プライベートメッセージ。

私は当初、カスタムモジュールを作成せずにWPでこれを実行できることに懐疑的でした。1ページのサイト、ブログ、オンラインストアは単純です-はい、しかしエンジニアリング計算ですか？しかし、すべてがうまくいきました-概念の証明のためにそれは非常に良いです、そしてそれから-それについて。構造化するために、個別のケースの形で提示します。



繰り返しになりますが、私は印刷開発者なので、プラグインのPHPコードを変更することで、プラグインに求めていたものを実現できたとき、私は大いに満足しました。つまり、私が話したいのは、サイトを作りたいが、WP、CSS、PHPの複雑さを理解していない人たちですが、一般的にはプログラミングを理解していて、コードを恐れていません。

1.開発ツール

プログラムの長い比較分析は行いませんでした。必要なタスクが解決されていれば十分でした。これが私が使用したものです：

• Visual Studio Codeは、プラグインコードを表示および編集するための優れた無料のエディターです。
• Firefox Developer Edition-ページの表示、編集、分析用。
• FileZilla-プラグイン/テーマファイルをサーバーと共有するため。
• TotalCommander-指定されたテキストでファイルを検索します。

ここでは、1つのWPプラグインであるLoco Translateも含めます。これは、プラグインの翻訳を作成または修正するためのかけがえのないツールです。



WP自体に関しては、英語のYouTubeセグメントでは、おそらくすべてが伝えられており（発生した質問に対する答えが見つからなかったことを覚えていません）、多くの優れたチャネルがあります。WPBeginnerチャネルとWordPressチュートリアルチャネルについて言及します。

2.計算機

WPには膨大な数のプラグインがありますが、商品や保険のコストを計算しない限り、計算を行うことは一般的な作業ではありません。しかし、このタスクのためのプラグインがあります。それを見つけたとき、私はそのアイデアが実現可能であることに気づきました。計算フィールドフォーム-そして無料版でも、計算用のフォームを作成することができます。一般的に、それは素晴らしいことです。インターフェイスと式エディタを理解する必要がありますが、それらは論理的で十分に文書化されています。計算機の1つを例として使用すると、編集メニューは次のようになります。





フォームの内容を視覚的に配置できるフィールドなど、いくつかのタイプのフィールドがありますが、主なフィールドは入力（値の選択または直接入力）フィールドと出力（計算値）フィールドです。



各フィールドには、「fieldname％n」のようなシリアル番号を持つ独自の識別子があります。実際、これは、計算フィールドの計算で使用される変数の名前です。この場合、サービス計算フィールドを非表示にすることができます。



既製の関数の中には、三角測量や逆三角測量など、複雑な計算にも必要なものがすべてあります。計算フィールドの構文は（あなたはのif-else分岐、JS機能、およびサードパーティの呼び出しを使用することができますここにあるドキュメントからの例）。関数構文の例：

( function() {
if( fieldname3 > 100 ) return fieldname1+fieldname2;
if( fieldname3 <= 100 ) return fieldname1*fieldname2;
} ) ();

非常に便利な機能は、選択したフィールドの値に依存関係を表示することです。これがドキュメントの関連セクションであり、例では次のようになります。





正直なところ、プラグインは私を救ってくれました。もちろん、いくつかの計算では数十の計算フィールドと複雑な式があるため、ページは面倒であることが判明しました。私はそれを飛ばしたいので、私の計画は、インターフェースを容易にするサードパーティの関数の呼び出しに対処することですが、これを行う方法はまだわかりません。さて、ここにステップバイステップがあります、私はそれを理解します。



経験からもっと、私は何をお勧めしますか：

1. Excel ( , : «», «POW»), , .
2. , , . , .
3. (, ) ' '.
4. – «Div», . , . «» , «».

3.

一部のプラグインは無料バージョンで基本的な機能を提供しますが、表示のカスタマイズは非常に簡単ですが、外観をカスタマイズするためのオプションを制限します。これには、CSSとPHPコード自体の2つのツールがあります。アマチュアのためにアマチュアとして説明します。

3.1。CSSによるスタイリング

htmlページの要素ごとに、CSSを使用して表示スタイルを定義できます。

CSS- {
_1: ;
_2: ;
}

セレクターとプロパティについてグーグルで検索する必要があります。Web開発は、ロシア語であっても、一般的に非常によく文書化されているため、問題ありません。コメントだけさせていただきます。



要素に適用されているスタイルとその識別子を確認するには、Firefox DeveloperEditionまたは同等のものが必要です。要素を右クリックして「要素の検査」を選択すると、チャームが表示されます。







この例のセレクターを見てみましょう。関心のある要素は、ユーザー名入力フィールドです。 htmlコードにはクラスとIDが含まれているため、セレクターとして使用できます。

.input-text input           // ._ _ (. 1)
input.input-text            // _._ (. 2)
#fep-message-top input      // #id _ (. 1)
input#fep-message-top       // _#id (. 2)
#fep-message .input-text    // #id _

同じページに同じIDを持つ要素は存在できないため、IDセレクターはより「強力」です。したがって、特定のプラグインフォームが1ページでのみ使用されている場合、または表示スタイルがすべての場合に適している場合は、IDセレクターが必要です。しかし、要素にIDが設定されていない場合はどうなりますか？これはよくあることです。次に、親ブロック内のidの存在を確認する価値があります。たとえば、この場合、コンテナのid = "user_box"です。次に、次のように要素にアクセスできます。

div#user_box input      // _#id _

入れ子にすることはもっとできます。例として：

div.fep-field div.field-with-icon input     //      

この場合、アクセスはIDではないため、このセレクターで説明されているスタイルは、ユーザー名入力フィールドとメッセージ件名入力フィールドの両方に適用できます（両方とも「field-with-icon」クラスのコンテナー内）。



便利なもう1つのオプションは、プロパティ値セレクターです。この例の場合：

input[type="text"] //    «type»

本質は大まかに明らかだと思います。ここでは試行錯誤がうまく機能します。優れた点は、Firefox DEを使用すると、ページコード、セレクター、プロパティをその場で編集できることです。目的の結果を達成し、結果の変更をサーバーに転送します。これには3つの方法があります。

• プラグインでは、設定に「カスタムCSS」、「追加スタイル」などのフィールドが含まれる場合があります。
• テーマの外観設定でも同じです。
• CSSを使用してソースファイルに変更を加えます（上の図で強調表示されています）-この方法では、テーマstyle.cssの一般的なスタイルファイルでは成功しませんでした。何か注意が必要です。

異なるセレクターの同じプロパティの値の間で、優先度が最も高いものが常に選択されます。論理は、ローカル定義がグローバル定義よりも高い優先順位を持っているということです。セレクター、つまり「！Important」修飾子を使用してプロパティをオーバーライドできない場合は、値の優先度が高くなります。

input[type="text"] {
padding-left: 40px !important; //   
}

セレクターについて最後に言うことは、レスポンシブスタイルの「@media」コンストラクトです。これは、最小または最大の表示幅など、特定の条件下でセレクターをアクティブにします。使用例は次のとおりです。

@media(max-width:650px) {     //   
   .comment-body .avatar {
        width: 50px !important;    //    
}
}

プロパティ自体に関しては、それらがたくさんあり、特定のタスクのドキュメントを見る必要があります。最も簡単な方法は、色、位置を変更し、完成したスタイルをコピーすることです。FirefoxDEでその場で色を選択すると便利です。配置に関しては、「display」プロパティのさまざまな値を理解し、たとえばこの記事を読む必要があります。

3.2。PHPで表示をカスタマイズする

PHPプラグインコードを編集する2つの主な理由は、テキストの置換とページレイアウトの編集です。

3.2.1。テキストの置き換え

最初のものについては、友好的な方法で、プラグイン自体の設定メニューを使用するか、LocoTranslateプラグインを使用して解決する必要があります。プラグインのローカリゼーションは一般的にどのように機能しますか？WPコンソールの一般設定でサイト言語が選択され、これによって使用される変換ファイルが決まります。翻訳ファイル（拡張子.po）の構造は次のとおりです。

#: utilities.php:1910 utilities.php:2095     //     
msgid "Lost your password?"                    //  
msgstr " ?"                        // 

Utilities.phpファイルの対応する行（たとえば、1910番目）には、次のものがあります。

$str .= '<div class="impu-form-links-pass"><a href="'.$lost_pass_page.'">'.__('Lost your password?', 'ihc').'</a></div>';

ここでは、プラグイン 'ihc'の元の文字列とテキストドメインのIDを確認でき、その結果、翻訳された文字列が置き換えられます。Loco Translateは、翻訳ファイルを操作するためのシンプルで便利なインターフェイスを提供します。





これらの行には、出力形式を定義する文字（％s、％dなど）が含まれている場合があります。-翻訳では、もちろん、それらを保存する必要があります。ちなみに、数字が違うとエンディングが違う（「3コメント」「5コメント」）という問題がありますので、抜け出さないといけません。



そのため、開発者が翻訳ファイルのエントリを示さない場合、上記の方法では到達できない場合があります。あなたは違ったふるまいをしなければなりません。すべてのプラグインファイルは/ wp-content / plugins / plugin_nameディレクトリからダウンロードされ、行または行の一部による検索（Total Commanderまたは類似のヘルプ）を使用して、それを含むphpファイルを検索します（「ではなく、一意である場合に適しています」ログインする "）。また、コード内の文字列を直接置き換えるか、翻訳ファイルにエントリを入力して目的の翻訳を行うことができます。

3.2.2。レイアウトの編集

プラグインまたはテーマの設定で変更されないものを変更したい場合に、状況が発生する可能性があります。ここで1つの例を見ていきます。このセクションが興味や質問を引き起こした場合、私はそれを補足します。何よりも、私は個人的な通信のためにフロントエンドPMプラグインを変更していました。人気のない機能なので、おそらくこれがそれを実装する唯一のプラグインであるため、表示部分の詳細は低くなります。ページの上部ブロックを形成していた元のファイルを元に戻し、それがどのように順番に行われたかを示しました。





「InspectElement」から、変更するブロックを見つけて、検索用の一意の識別子を探します。これらは、まず、プラグイン固有のクラス名またはIDです。ここでは、id =“ fep-header”が共通コンテナに設定されています。行の出現を検索すると、わかりやすい名前header.phpのファイルが表示されます。 VSコードで開き、次のコードを確認します。

<div id="fep-header" class="fep-table">
        <div>
            <div>
                <?php echo get_avatar( $user_ID, 64, '', fep_user_name( $user_ID ) ); ?>
            </div>
            <div>
                <div>
                    <strong><?php esc_html_e( 'Welcome', 'front-end-pm' );?>: <?php echo fep_user_name( $user_ID ); ?></strong>
                </div>
                <div>
                    <?php echo strip_tags( sprintf( __('You have %1$s and %2$s unread', 'front-end-pm'), '<span class="fep_unread_message_count_text">' . sprintf( _n( '%s message', '%s messages', $unread_count, 'front-end-pm' ), number_format_i18n( $unread_count ) ) . '</span>', '<span class="fep_unread_announcement_count_text">' . sprintf( _n( '%s announcement', '%s announcements', $unread_ann_count, 'front-end-pm' ), number_format_i18n( $unread_ann_count ) ) . '</span>' ), '<span>' ); ?> 
                </div>
                <div class="<?php echo $box_class; ?>">
                    <?php echo strip_tags( sprintf( __( 'Message box size: %1$s of %2$s', 'front-end-pm' ), '<span class="fep_total_message_count">' . number_format_i18n( $total_count ) . '</span>', $max_text ), '<span>' ); ?>
                </div>
            </div>
            <?php do_action( 'fep_header_note', $user_ID ); ?>
        </div>
    </div>

（私のように）PHPに慣れていない人にとっては、HTMLのように見えますが、<？Php ... code ...？> Insertsがあります。これらの挿入は、ユーザーデータなどのさまざまなパラメーターに応じて、HTMLページを形成するために使用されます。つまり、PHPはそのような静的なページコンストラクタであり、JavaScriptは複雑なイベントを処理するために使用されます。



より詳細なプラグインからトップパネルのスタイルをコピーし、メールボックスのサイズに関する不要な情報を削除し、新しいメッセージに関する情報の表示方法を変更しました。これは、コードとディスプレイで起こったことです。

<div class="fep-header">
        <div class="fep-header-left-side">
            <div class="fep-user-page-avatar">
                <?php echo get_avatar( $user_ID, 96, '', fep_user_name( $user_ID ) ); ?>
            </div>
        </div>
        <div class="fep-header-right-side">
            <div class="fep-header-username">
                <?php echo fep_user_name( $user_ID );?>
            </div>
            <div class="fep-header-top-info">
                <?php
                    if( $unread_count == 0 && $unread_ann_count == 0 )
                    {
                        echo sprintf( __('    .', 'front-end-pm'));
                    }else{
                        if( $unread_count != 0 )
                            echo sprintf( __(' : %d<br>', 'front-end-pm'), $unread_count);
                        if( $unread_ann_count != 0 )
                            echo sprintf( __(' : %d', 'front-end-pm'), $unread_ann_count);
                    }
                ?>
            </div>
        </div>
        <?php do_action( 'fep_header_note', $user_ID ); ?>
        <div class="fep-top-background"></div>
    </div>

当然、このプロセスは反復的であまり便利ではありませんが、私は辞任しました。おそらくもっと便利な方法があります。ファイルを保存し（VSコード）、サーバー上のファイルを置き換え（FileZilla）、ページを更新します（FirefoxDE）。これは最も難しいケースではありませんが、プロセスの本質を示しています。ブロックを交換したり、不要なブロックを削除したりする必要がある場合は、関数、クラス、データ配列が変更された、より複雑なタスクでも、より単純なタスクでも同じです。



ただし、このアプローチでは、更新プロセスがはるかに困難になります。更新後、おそらく（「機能し、良好である」という原則に従って機能する限り、私はそれをしませんでした）、編集をやり直す必要があります。これがおそらく主な欠点です。

4.パフォーマンス

WPはスピードではありません。正直なところ、ダウンロード速度を向上させようとしても、大幅な増加には至りませんでしたが、誤動作につながりました。AssetCleanUpプラグインを使用して不要なCSS / JSの読み込みを削除しましたが、読み込み速度の目立った向上には気づきませんでした（GTmetrixを調べました）が、一部のプラグインは、そこで使用されているかどうかに関係なく、すべてのページで上昇していることに気付きました。その結果、今はオフにしました。それから私はW3トータルキャッシュを試しましたサーバーにページをキャッシュする場合-ページがPHPを使用して生成されていないが、準備ができたコピーがロードされている場合（定期的に更新されます）。しかし、それで私のサイトがクラッシュし、ログインしたユーザーのページをキャッシュしないことをお勧めする設定であることがわかりました。私の場合、ページのキャッシュを設定するのは非常に難しいことが明らかになりました。コードの一部の部分的なキャッシュのみを残しました。それをさらに理解します（プラグイン設定の変更を有効にするには、キャッシュをリセットする必要がある場合があります）。



一般的に、うまくいく場合もあると思いますが、すぐに箱から出してすぐには役に立ちませんでした。私が理解しているように、有料のWP Rocketにはユーザーごとにキャッシュオプションがあります。後で試してみるかもしれません。

5.セキュリティ

かつて研究所で彼は専門の「情報セキュリティ」を研究しました。卒業後、彼は電子機器に従事し始めましたが、専門的な変形は残っていました。インターネットがセキュリティの面でリークしていること。積み重ねられた構造のWPにはいくつの脆弱性があるか想像できます。すべての人にパッチを適用できるわけではありませんが、この手順の足跡をたどって最も簡単なことを行い、Wordfenceをインストールしました。パフォーマンスがそれほど低下しないかどうかを確認しましょう。そのままにしておくことができます。

6.プラグイン

6.1。ユーザーとアクセスの管理

この問題を解決するために、Indeed Ultimate Membership Proプラグイン（$ 41）を選択しました。そこには別のビデオチュートリアルがあります-ここに。たくさんの設定をいじくり回さなければなりませんでしたが、すべてについて詳しく書くことはしません。質問がある場合は、コメントまたはプライベートメッセージで回答します。アクセス制御の方法についてのみ説明します。

基本的に、システムにはいくつかの役割があり（元々はブログ用に調整されていました）、多くのプラグインがそれらと連携して、役割に応じて機能を制御します。デフォルトの役割は「設定>一般」で設定されています。





サブスクリプション管理プラグインは、別のレベル、つまりサブスクリプションレベルを追加します。これに従って、コンテンツへのアクセスと、メニュー項目の表示を含む各ページの表示を制御できます。また、ユーザーは登録済みと未登録に分けられます。これは、コンテンツの表示を分離するもう1つの方法です。



プラグインには欠陥がないわけではありませんが、その役割は果たします。多くの設定がありますが、トレーニングビデオがあり、それを理解することができます。技術サポートは、どちらかといえば、サポートして教えてくれます。

6.2。知識ベース

最初は、pdfビューアプラグインを使用して本をプラットフォームに配置しましたが、資料へのリンクを作成する方法がなく、pdfは表示するための最も柔軟なオプションではありません。拒否し、ナレッジベースに行くことにしました。プラグインをEchoKnowledge Baseと呼びます、それは本当に良いです。しかし、pdfの表示に関しては、Flowpaperプラグインについて言及せずにはいられません。非常に美しく、誰かに役立つかもしれません。

6.3。投票

私はYopPollプラグインが好きでした-繰り返しますが、必要なものはすべてあり、すべての設定があり、無料バージョンでは見た目もかなり良いです。

7.何がうまくいかなかった

集合的なブログには、ユーザーが投稿を作成する機能が必要です。選択は素晴らしいものではありません-UserSubmitter Postsプラグイン（そのような有料のものもあります）。有料版も購入しましたが、承認フォームが削除され、サブスクリプション管理プラグインとの競合が発生しました。返金しましたが、開発者は問題を解決せず、他のプラグインのすべてを非難しました。しかし、それは重要ではありません。パブリケーション作成フォームには、画像をアップロードしてパブリケーションに挿入する機会はありません。





権利の取り扱いを開始し、便利で、便利なプラグインUser RoleEditorをインストールしました。そのため、ユーザーにすべてのページを編集する権限が与えられた場合にのみ、画像をロードすることが判明しました。もちろん、Tin fullは無効になっていますが、画像へのURLリンクのみを配置できます。ここでの問題は、投稿がまだ存在せず、WPが投稿作成フォームを含むページを編集するときに画像を追加することを検討していることです。多分誰かがこのプラグを解決する方法を教えてくれるでしょうか？

8.結論

WPは、最も単純な機能ではないプラットフォームのパイロットプロジェクトを最小限のコストで作成することを可能にしました。彼はさらなる発展のための出発点を作ることによって彼の問題を解決しました。投稿の内容について他にご不明な点がございましたら、お気軽にお問い合わせください。また、スペシャリストのコメントと推奨事項にも感謝します（パフォーマンスを向上させるために、CloudFlareのようなCDN、有料のWP Rocket、WP Engineのような特殊なホスティング、またはWordfenceが実際に必要になります）。



皆さんお元気で！