Clever Geek Handbook

WordPressの商業開発のニュアンス





こんにちは、読者の皆様。 運命が判明したので、私は私のお気に入りの都市ハバロフスクでインターネット代理店プロジェクトの開発を担当している人の一人です。 そして、プロジェクトの組み立ての速度の要件に影響を与えるロシアの中央部と比較して、かなり低い予算で、顧客のために製品の適切な品質を維持する方法についてお話したいと思います。 そして、私の目標は、開発とさらなるメンテナンスコストを削減することです。これは、管理パネルの編集可能な要素をできるだけ多く使用して、できるだけ早くサイトを作成する必要性につながります。



ほとんどの場合、情報はCMS Worpdressに関する「技術計画」、「最高」です。 テクノロジー、パス、テクニックなどの使用については、私たちのパスについてのみ説明します。 宗教の問題-ホリバーを控えてください。 始めましょう。



小さな余談を開始します。 私たちの一般的な集団では、プロジェクトは開発原則に従っていくつかのタイプに正確に分割されています。







この記事の最初の2つのポイントのみを考慮することをすぐに予約します。3番目のポイントを一般化するのはかなり難しいタスクだからです。 みんなのお気に入り/最高/他のすべての悪いテクノロジーには独自のものがあり、小さな都市ではRoR / Flaskなどの優れた開発者を見つけるのは難しいかもしれません。 そして、それらについて概要を説明します。 このトピックに関心がある場合-詳細な記事チュートリアル「クライアントが喜んでいる4〜8時間でWPにWebサイトを構築する方法」ではありません。



なぜワードプレス？





低予算と世界へのエントロピーを減らしたいという願望は、選択を正当化しました。 詳細：







はい、パンフレットを手に持ってドアをノックして「WPについて話をしませんか？」と言いません。 このCMSを使用するだけで、これに関する注意事項があります。 実際、これは私たちがやってくるすべての新しいウェブマスターに私が発音した印刷形式の独白です。



プロジェクトを設計するとき、どのようなニュアンスを考慮する必要がありますか？





この段階ですでにサイトを構築することの微妙な違いについて考えるべきだと思います。 ここに、私が使用するプラグインとスニペットのセットからの一般的および具体的な推奨事項、おそらく明白な推奨事項を示します。



テンプレートは、「サイトヘッダー」、実際のコンテンツ、および「フッター」に簡単に分割する必要があります。 ヘッダー/フッターの一部の要素を非表示にする必要がある場合、WPは非常に多くの素晴らしい機能条件を提供します。 （ フロントページ（）、is_404（）など）。 外観を変更する必要がある場合-CSSは、 body_class（）を使用できます。



外観->サイトメニューで制御されるさまざまなメニューをタイプセットするときは、次の構造に従う必要があります。 



<ul> <li> <a href=""> </a> </li> <li> <a href=""> </a> <ul class="sub-menu"> <li> <a href=""> </a> </li> <li> <a href=""> </a> </li> </ul> </li> <li> <a href=""> </a> </li> </ul>




ここでのニュアンスのうち、サブメニューにcssクラスのサブメニューがあることが重要です。 これにより、 wp_nav_menu（$ args）関数のために、サイトの構築時にカスタムウォーカーを記述する必要がなくなります。



私はキャプテンとして明らかですが、レイアウト内のすべての動的な位置は、プレースホルダーをさらに置換するために、個別の要素（電話の場合、たとえば+ 7 XXX XXXなど）、または次の論理構造のいずれかでなければなりません：



リストへのレイアウト

リストアイテムのレイアウト

...

リストアイテムのレイアウト

リストの後のレイアウト




クライアントが管理パネルのwysiwygを介して貼り付けるコンテンツに対して、CSSで別のルールを作成することが不可欠です。 次のようなもの（それをLESSにします）： 



 .user-content{ ... a{ &:hover{ ... }; &:active{ ... }; &:focus{ ... }; } p{ ... } table{ thead { ... th { ... } } tbody { tr{ ... td{ ... } } } } h1, h2, h3, h4, h5, h6, h7{ … } h1{ ... } ... h7{ ... } ul{ ... li{ ... } } img{ … } }




将来的には、「なぜ写真を挿入したのにすべてがうまくいったのか」というような電話からあなたを救うでしょう。



サイトに画像ギャラリーがある場合（3行、6行など）、これらのギャラリーのレイアウトを、ギャラリーショートコードを使用してWPが生成するレイアウトに組み込む必要があります。 または、列数などのWP機能が冗長な場合は、このショートコードを再定義し、「リストの前のレイアウト、リストアイテムのレイアウト、リストの後のレイアウト」のルールに従ってレイアウトを作成します。



WPによって生成されるページネーションのレイアウトは、次の形式を取ります。 



 <div class="pagination"> <a class="prev page-numbers" href="#"> </a> <a class="page-numbers" href="#">1</a> <span class="page-numbers current">2</span> <a class="page-numbers" href="#">3</a> <a class="next page-numbers" href="#"> </a> </div>




「パンくずリスト」のレイアウトは簡単です。 ul liリスト、または<>>で区切られた<a/>またはそれらのような他のリスト。



また、上記のブロック全体が1つのフレーズに収まることを言いたい-WP / plugins / snippets-functionsが生成するマークアップをスタイリングすると、幸福があります。



html / css / jsファイルのセットを入手しました。次は何をしますか？





この時点では、kosher_wordpressと呼ばれるリポジトリがあるため、すべてのプロジェクトで毎回多くのプラグインをインストールする必要はありません。 その中に何があり、私の意見では、現時点では何が十分ですか：







そして、プロジェクトアセンブリ全体は次のようになります。







スニペット付きのファイルのおおよその内容： 

 <?php /* * Template Name:   */ ?> <?php /* *       . */ ?> <?php /* *   header.php */ get_header(); ?> <?php /* *    */ ?> <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <?php /* *         ,     $image['url'] */ $url = wp_get_attachment_url(get_post_thumbnail_id($post->ID)); $image = vt_resize(null, $url, 220, 220, true); if (!$image['url']) $image['url'] = 'http://placehold.it/220x220&text=NO IMAGE'; ?> <?php the_title(); ?> <?php the_content(); ?> <?php endwhile; ?> <?php else: ?> <p><?php _e('Sorry, no posts matched your criteria.'); ?></p> <?php endif; ?> <?php /* *   WP_Query   */ ?> <?php /*       */ $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; $args = array( 'post_type' => 'news', 'posts_per_page' => '3', 'paged' => $paged ); /*   WP_Query */ $the_query = new WP_Query($args); ?> <?php if ($the_query->have_posts()) : ?> <?php while ($the_query->have_posts()) : $the_query->the_post(); ?> <?php /* *         ,     $image['url'] */ $url = wp_get_attachment_url(get_post_thumbnail_id($the_query->post->ID)); $image = vt_resize(null, $url, 220, 220, true); if (!$image['url']) $image['url'] = 'http://placehold.it/220x220&text=NO IMAGE'; ?> <?php echo $image['url']; ?> <?php /* *    ,    (    more). *   ,   $the_query->the_post();   global $more;$more=0; *    WP     . */ ?> <?php the_title(); ?> <?php the_content(' ...'); ?> <?php endwhile; ?> <?php /* *   */ wp_corenavi($the_query); ?> <?php /* *   */ wp_reset_postdata(); ?> <?php else: ?> <p><?php _e('Sorry, no posts matched your criteria.'); ?></p> <?php endif; ?> <?php /* *   footer.php */ get_footer(); ?>


このアルゴリズムによると、過去1年間に100以上のサイトを収集しました。設計の複雑さやさまざまなモーションエフェクトに応じて、平均で1〜3営業日かかります。 アセンブリ自体は約4〜8時間かかります。 おそらくこれは結果ではありませんが、これまでのところ私は比較するものが何もありません、私は対話に感謝します。


More articles:


All Articles