SamsPcbLab第2部分:WP,CSS,PHP和PCB

我将尝试尽可能简短地描述在没有任何Web开发初期知识的情况下在WordPress(WP)上为PCB开发人员开发平台的经验,重点介绍一些可能对遵循相同方法的人有用的细微差别。另外,如果我做错了什么,我会很乐意听取专家的建议。我知道,在Habré上一个功能强大的程序员社区中,我了解WP的态度,因为我看到了有关WP的缩小文章,并且从原则上讲,我本人也了解这种解决方案的次优性。但是,尽管如此,我仅用一个插件就花了三个月的时间就实现了功能,据我的研究所朋友称,第三方开发的功能可能要花费数十万卢布甚至更多的时间。所以我决定从该项目的试用版开始,在此基础上,有可能进一步扩展-例如,作为第三方开发的技术规范。





任务是为PCB开发人员创建一个具有以下功能的平台:



  • 简化特定计算性能的计算器;
  • 开发印刷电路板的知识库;
  • 集体博客;
  • 私人信息。


我最初怀疑是否可以在WP中完成而无需编写自定义模块。一页的网站,博客,在线商店都很简单-是的,但是工程计算呢?但是一切都解决了-这对于概念验证非常有用,而且在此方面还有更多。为了结构化,我将以单独的案例的形式进行介绍。



再说一次,我是一名印刷开发人员,所以当我能够通过更改插件的PHP代码从插件实现我想要的功能时,我非常高兴。也就是说,我要说的是针对那些想要创建站点的人,但是他们不了解WP,CSS和PHP的复杂性,尽管总的来说他们了解编程并且不惧怕代码。



1.开发工具



我没有对程序进行长时间的比较分析;对我来说,解决必要的任务就足够了。这是我使用的:





在这里,我还将包括一个WP插件-Loco Translate,它是创建或调整插件翻译的一种不可替代的工具。



至于WP本身,在YouTube的英语版中,可能所有内容都被告知了(我不记得没有找到所出现问题的答案),有很多好的渠道,我会提到WPBeginner和WordPress Tutorials渠道。



2.计算器



WP有大量的插件,但是执行计算根本不是一项典型的任务,除非它正在计算商品或保险的成本。但是有一个用于此任务的插件。当我发现它时,我意识到这个想法是可以实现的。计算字段表单-甚至在免费版本中,它也允许您创建用于计算的表单,总的来说,它很棒。界面和公式编辑器必须要弄清楚,但是它们是合乎逻辑的并且有据可查。这是使用其中一个计算器作为示例的编辑菜单外观。





字段有几种类型,包括允许您直观地排列表单内容的字段,但是主要的字段是输入(选择或直接输入值)和输出(计算值)字段。



每个字段都有其自己的标识符,该标识符带有序列号,例如“ 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代码本身。我将以业余爱好者的身份对其进行解释。



3.1。CSS样式



对于html页面的每个元素,您可以使用CSS定义显示样式:



CSS- {
_1: ;
_2: ;
}


您只需要在Google上搜索选择器和属性,就可以很好地证明Web开发,即使是俄语也是如此,因此没有问题。我只会发表一些意见。



要了解应用于元素的样式以及其标识符是什么,您需要Firefox Developer Edition或等效版本。右键单击一个元素,然后选择“检查元素”将显示一个超级按钮。







让我们看一下这个例子中的选择器。感兴趣的元素是用户名输入字段。 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的元素。因此,如果特定的插件形式仅在一页上使用,或者显示样式适合所有情况,那么id选择器就是您所需要的。但是,如果没有为该元素设置id,该怎么办呢?然后,有必要查看父块中id的存在。例如,在这种情况下,容器的ID为=“ user_box”。然后可以像这样访问元素:



div#user_box input      // _#id _


嵌套可以更多。举个例子:



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


由于在这种情况下访问不是id,因此为此选择器描述的样式将适用于用户名输入字段和消息主题输入字段(均在“带有图标的字段”类的容器中)。



可能派上用场的另一个选项是属性值选择器。对于此示例:



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


我认为本质是大致清楚的,反复试验在这里非常有用。优点是Firefox DE允许您即时编辑页面代码,选择器和属性。我们达到了预期的结果-并将结果更改传输到服务器。有以下三种方法:



  • 在插件中,设置可能包含“自定义CSS”,“其他样式”等字段;
  • 主题的外观设置相同;
  • 使用CSS对源文件进行更改(如上图所示)-通过这种方法,我无法成功处理主题style.css的常规样式文件,因此需要做一些棘手的事情。


在不同选择器中相同属性的值之间,将始终选择优先级最高的值。逻辑是本地定义的优先级高于全局定义的优先级。如果无法使用选择器覆盖属性,即“!Important”修饰符,则会提高该值的优先级:



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


关于选择器,要说的最后一件事是响应样式的“ @media”构造,它在某些条件下激活选择器:最小或最大显示宽度等。这是一个用法示例:



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


至于属性本身,有很多,您需要查看特定任务的文档。最简单的操作是更改颜色,定位并复制完成的样式。在Firefox DE中方便地即时选择颜色。关于定位,您需要了解“显示”属性的各种值和读取,例如,这个文章。



3.2。使用PHP自定义显示



编辑PHP插件代码的两个主要原因是文本替换和页面布局编辑。



3.2.1。取代文字



至于第一个,应该以友好的方式使用插件的设置菜单或使用Loco Translate插件解决。插件本地化一般如何工作?在WP控制台的常规设置中选择了网站的语言,这确定了将使用哪个翻译文件。转换文件(扩展名.po)具有以下结构:



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


在utilities.php文件的相应行(例如,1910th)中,我们找到:



$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。布局编辑



当您想更改插件或主题设置中未更改的内容时,可能会出现这种情况。我在这里分解一个例子。如果本节引起人们的兴趣和问题,我将对其进行补充。最重要的是,我正在为个人通信修改Front End PM插件。不受欢迎的功能,因此这可能是唯一实现此功能的插件,因此显示部分的详细程度很低。我放回了构成页面顶部的原始文件,以显示它是如何顺序执行的。





我们通过“检查元素”找到我们要更改的块,并寻找唯一的标识符以进行搜索-首先,这些标识符是特定于插件的类名或ID。在此为公共容器设置了id =“ fep-header”。搜索一行的出现会导致一个文件文件名为header.php。用VS Code打开,并观察以下代码:



<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 ...?>插入。这些插入用于根据各种参数(例如用户数据)形成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 Code),替换服务器上的文件(FileZilla),刷新页面(Firefox DE)。这不是最困难的情况,但它显示了过程的本质。当您只需要交换块或删除不必要的块时,在更复杂的任务(功能,类和数据数组的更改以及更简单的任务)中也是如此。



但是这种方法使更新过程更加困难。更新后,可能会(只要它按照“有效且良好”的原则运作,我就不会这样做),您将不得不重新进行编辑。这可能是主要的缺点。



4.表现



WP与速度无关。坦白地说,提高下载速度的尝试并没有导致明显的增加,但是确实导致了故障。我使用Asset CleanUp插件删除了不必要的CSS / JS加载,但是没有注意到加载速度显着提高(我查看了GTmetrix),但是注意到有些插件在所有页面上都可以使用,无论是否在其中使用它们。结果,我暂时将其关闭。然后我尝试了W3 Total Cache用于在服务器上缓存页面-当页面不是使用PHP生成的,但是已加载就绪副本(定期更新)时。但是随着它的出现,我的网站崩溃了,然后我还看到推荐的设置是不缓存已登录用户的页面,很明显,就我而言,缓存页面非常难以设置。我只留下了部分代码的部分缓存,我将进一步弄清楚(有时您现在必须重置缓存才能使对插件设置的更改生效)。



总的来说,我认为在某些情况下它会很好用,但并没有立即帮助我。据我了解,付费WP Rocket为每个用户提供了一个缓存选项,也许我以后会再尝试。



5.安全性



他曾在该研究所学习过“信息安全”专业。尽管毕业后他开始从事电子行业,但专业变形仍然存在。互联网在安全性方面存在漏洞。我可以想象它的堆积式结构中WP有多少个漏洞。并非每个人都可以打补丁,但是我按照说明的脚步做了最简单的事情,并安装了Wordfence-让我们看看性能是否受不了多少影响,您可以保留。



6.插件



6.1。用户和访问管理



为了解决这个问题,我选择了Indeed Ultimate Membership Pro插件(41美元)。上面有单独的视频教程-在这里。我不得不修改很多设置,但是我不会详细介绍所有内容,如果有问题,我会在评论或私人留言中回答。我只会告诉您有关访问控制的方法。

基本上,系统中有几个角色(最初是为博客量身定制的),许多插件与它们配合使用,根据角色来控制功能。默认角色在“设置>常规”中设置。





订阅管理插件添加了另一层-订阅级别,根据该层,您可以控制对每个页面的内容及其显示的访问,包括菜单项的显示。同样,用户分为注册的和未注册的-这是分隔内容显示的另一种方法。



该插件并非没有缺陷,但是可以完成它的工作。有很多设置,但是有培训视频,您可以弄清楚,技术支持(如果有的话)将支持并告诉您。



6.2。知识库



最初,我是使用pdf查看器插件将该书放到平台上的,但是无法创建到该材料的链接,并且pdf并不是查看的最灵活选择。拒绝并决定去知识库。我只是称呼插件Echo Knowledge Base,这真的很好。但至于查看pdf,我不禁要提到Flowpaper插件,它非常漂亮,也许对某人有用。



6.3。表决



我喜欢Yop Poll插件-再次,您需要的所有内容,所有设置,甚至免费版本的外观都非常不错。



7.什么没用



集体博客需要用户创建帖子的能力。选择不是很好-User Submitter Posts插件(也有这样的付费插件)。我什至买了它的付费版本,但是它杀死了我的授权表,与订阅管理插件发生了冲突-我退了款,开发人员没有解决问题,将一切归咎于其他插件。但这不是重点。出版物创建表单没有提供将图像上载和插入出版物的机会。





开始处理权限时,它很有用,安装了有用的插件User Role Editor因此,事实证明只有在授予用户编辑所有页面的权限时才加载图像。完全可用,当然是禁用的,而您只能放置指向图像的URL链接。这里的问题是帖子尚不存在,WP会在编辑包含帖子创建表单的页面时考虑添加图像。也许有人可以告诉您如何解决此问题?



8.结论



WP使以最低成本创建具有最简单功能的平台试验项目成为可能。他通过为进一步发展创造起点解决了他的问题。如果您对帖子内容还有其他疑问,我将很乐意分享我的经验。我还要感谢专家的意见和建议(为了提高性能-实际需要像CloudFlare这样的CDN,还是需要付费的WP Rocket,像WP Engine这样的专业托管,或者是Wordfence)。



祝你们好运!



All Articles