SamsPcbLab Parte 2: WP, CSS, PHP e PCBs

Tentarei descrever o mais sucintamente possível a experiência de desenvolvimento de uma plataforma para desenvolvedores de PCB em WordPress (WP) sem nenhum conhecimento inicial de desenvolvimento web, focando em algumas nuances que podem ser úteis para quem seguirá o mesmo caminho. Além disso, terei prazer em ouvir conselhos de especialistas se estiver em algo errado. Conheço uma comunidade um tanto poderosa de programadores em Habré, entendo a atitude em relação ao WP, porque vi os menos posts sobre isso e, em princípio, eu mesmo entendo a natureza não ótima de tal solução. Mesmo assim, em três meses com o pagamento de apenas um plug-in, consegui implementar uma funcionalidade nele, cujo desenvolvimento para terceiros, de acordo com meu amigo do instituto, poderia custar várias centenas de milhares de rublos e ainda mais tempo. Então decidi começar com uma versão piloto do projeto,a partir do qual será possível desenvolver mais - por exemplo, como uma especificação técnica para desenvolvimento de terceiros.





A tarefa era criar uma plataforma para desenvolvedores de PCB com a seguinte funcionalidade:



  • calculadoras que simplificam o desempenho de cálculos específicos;
  • base de conhecimento para o desenvolvimento de placas de circuito impresso;
  • blog coletivo;
  • Mensagens privadas.


Eu estava inicialmente cético de que isso pudesse ser feito no WP sem escrever módulos personalizados. Sites de uma página, blogs, lojas online são simples - sim, mas cálculos de engenharia? Mas deu tudo certo - para uma prova de conceito é muito bom, e então - sobre isso. Vou apresentá-lo na forma de casos separados para ser estruturado.



Mais uma vez, sou um desenvolvedor de impressão, então, quando consegui o que queria com a alteração do código PHP do plugin, fiquei extremamente feliz. Ou seja, o que vou falar é para quem quer fazer um site, mas não entende os meandros de WP, CSS e PHP, embora em geral entendam de programação e não tenham medo de código.



1. Ferramentas de desenvolvimento



Não fiz uma longa análise comparativa dos programas, bastava-me que a tarefa necessária estivesse a ser resolvida. Aqui está o que eu usei:





Aqui também incluirei um plug-in WP - Loco Translate , simplesmente uma ferramenta insubstituível para criar ou ajustar a tradução de plug-ins.



Quanto ao WP em si, no segmento do YouTube em inglês, provavelmente tudo está contado (não me lembro de não ter achado uma resposta para a pergunta que surgiu), existem muitos canais bons, eu mencionaria os canais WPBeginner e Tutoriais WordPress.



2. Calculadoras



O WP tem um grande número de plug-ins, mas fazer cálculos não é uma tarefa típica, a menos que seja calcular o custo de mercadorias ou seguro. Mas existe um plugin para esta tarefa. Quando o encontrei, percebi que a ideia era realizável. Formulário de Campos Calculados - e mesmo na versão gratuita, permite criar formulários para cálculos, em geral é ótimo. A interface e o editor de fórmulas terão que ser descobertos, mas são lógicos e bem documentados. Aqui está a aparência do menu de edição usando uma das calculadoras como exemplo.





Existem vários tipos de campos, incluindo aqueles que permitem organizar visualmente o conteúdo de um formulário, mas os principais são os campos de entrada (seleção ou entrada direta de um valor) e de saída (valores calculados).



Cada campo tem seu próprio identificador com um número de série como "fieldname% n", na verdade é o nome de uma variável que é usada em cálculos em campos calculados. Nesse caso, os campos calculados do serviço podem ser ocultados.



Entre as funções prontas, está tudo o que você precisa, mesmo para cálculos complexos, incluindo trigonométricas e trigonométricas inversas. A sintaxe do campo calculado permite que você use ramificações if-else, funções js e chamadas de terceiros ( aqui está um exemplo da documentação). Exemplo de sintaxe de função:



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


Um recurso extremamente útil é a criação de dependências de exibição nos valores dos campos selecionados. Esta é a seção relevante da documentação e é assim que ela se parece em um exemplo:





Para ser honesto, o plugin acabou de me salvar. É claro que as páginas se tornaram pesadas, porque em alguns cálculos existem várias dezenas de campos calculados e fórmulas complexas. Eu quero que ele voe, então meus planos são lidar com a chamada de funções de terceiros que facilitariam a interface, embora ainda não tenha ideia de como fazer isso. Bem, aqui está um passo a passo, vou descobrir isso.



Mais com a experiência, o que eu recomendaria:



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


3.



Alguns plug-ins fornecem funcionalidades básicas na versão gratuita, mas limitam as opções de personalização da aparência, embora personalizar a exibição seja bastante simples. Existem duas ferramentas para isso - CSS e o próprio código PHP. Vou explicar como amador para amador.



3.1. Estilo com CSS



Para cada elemento da página html, você pode definir o estilo de exibição usando CSS:



CSS- {
_1: ;
_2: ;
}


Você só precisa pesquisar no Google sobre seletores e propriedades, o desenvolvimento web é geralmente muito bem documentado, mesmo em russo, então não há problema. Vou apenas fazer alguns comentários.



Para descobrir qual estilo é aplicado a um elemento e qual é seu identificador, você precisa do Firefox Developer Edition ou equivalente. Clicar com o botão direito em um elemento e selecionar “Inspecionar elemento” exibe um charme.







Vejamos os seletores neste exemplo. O elemento de interesse é o campo de entrada do nome de usuário. O código html contém uma classe e um id, para que você possa usar como seletor:



.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 _


O seletor de id é mais "forte", pois não pode haver elementos com o mesmo id na mesma página. Portanto, se um formulário de plug-in específico for usado apenas em uma página ou o estilo de exibição for adequado para todos os casos, o seletor de id é o que você precisa. Mas e se nenhum id for definido para o elemento, o que geralmente é o caso. Então, vale a pena observar a presença de id nos blocos pai. Por exemplo, neste caso, o contêiner tem id = "user_box". Então o elemento pode ser acessado desta forma:



div#user_box input      // _#id _


O aninhamento pode ser mais. Como um exemplo:



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


Como, neste caso, o acesso não é id, o estilo descrito para este seletor será aplicável ao campo de entrada do nome de usuário e ao campo de entrada do assunto da mensagem (ambos em containers da classe "campo com ícone").



Outra opção que pode ser útil é um seletor de valor de propriedade. Para este exemplo:



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


Acho que a essência é mais ou menos clara, tentativa e erro funciona muito bem aqui. A beleza é que o Firefox DE permite que você edite o código da página, seletores e propriedades imediatamente. Alcançamos o resultado desejado - e transferimos as alterações resultantes para o servidor. Existem três métodos para isso:



  • no plugin, as configurações podem conter um campo como "Custom CSS", "Additional Styles", etc.;
  • o mesmo nas configurações de aparência do tema;
  • fazer alterações no arquivo de origem com CSS (destacado na figura acima) - com este método não tive sucesso com o arquivo de estilo geral do tema style.css, há algo complicado de fazer.


Entre os valores de uma mesma propriedade em diferentes seletores, sempre será selecionado aquele de maior prioridade. A lógica é que a definição local tem uma prioridade maior do que a global. No caso em que não é possível substituir uma propriedade usando um seletor, ou seja, o modificador "! Importante", que aumenta a prioridade do valor:



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


A última coisa a dizer sobre os seletores é a construção “@media” para estilos responsivos, que ativa o seletor sob certas condições: largura de exibição mínima ou máxima, etc. Aqui está um exemplo de uso:



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


Quanto às propriedades em si, existem muitas e você precisa consultar a documentação para uma tarefa específica. A coisa mais fácil a fazer é mudar a cor, o posicionamento e copiar o estilo acabado. A seleção de cores é conveniente na hora no Firefox DE. Em relação ao posicionamento, você precisa entender os diferentes valores da propriedade "display" e ler, por exemplo, este artigo.



3.2. Personalizando a tela com PHP



Os dois principais motivos para editar o código do plugin PHP são a substituição do texto e a edição do layout da página.



3.2.1. Substituindo texto



Quanto ao primeiro, de forma amigável, deve ser resolvido através do menu de configurações do próprio plugin, ou através do plugin Loco Translate. Como funciona a localização de plugins em geral? O idioma do site é selecionado nas configurações gerais no console WP e isso determina qual arquivo de tradução será usado. O arquivo de tradução (extensão .po) tem a seguinte estrutura:



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


Na linha correspondente do arquivo utilities.php (1910, por exemplo), encontramos:



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


Aqui você pode ver a string original e o id do domínio de texto do plugin 'ihc', e a string traduzida será substituída como resultado. Loco Translate fornece uma interface simples e conveniente para trabalhar com arquivos de tradução.





Às vezes, essas linhas contêm caracteres que definem os formatos de saída -% s,% d, etc. - na tradução, é claro que precisam ser preservados. Com eles, aliás, há problemas com o plural e terminações diferentes para números diferentes ("3 comentários", "5 comentários"), você tem que sair.



Então, às vezes, se os desenvolvedores não indicam a entrada no arquivo de tradução, então não pode ser alcançado pelo método acima. Você tem que agir de forma diferente. Todos os arquivos de plug-in são baixados do diretório / wp-content / plugins / plugin_name e, procurando por uma string ou parte de uma string (Total Commander ou equivalente para ajudar), procure o arquivo php que o contém (é bom se for único, não " Conecte-se "). E você pode substituir a string diretamente no código ou inserir uma entrada no arquivo de tradução e fazer a tradução desejada.



3.2.2. Editando o layout



Pode surgir uma situação quando você deseja alterar algo que não muda nas configurações do plugin ou do tema. Vou examinar um exemplo aqui. Se esta seção despertar interesse e dúvidas, irei complementá-la. Acima de tudo, terminei o plugin Front End PM para correspondência pessoal . Funcionalidade impopular, então este é provavelmente o único plugin que o implementa, então a elaboração na parte de exibição é baixa. Coloquei de volta o arquivo original que formava o bloco superior da página para mostrar como isso foi feito sequencialmente.





Encontramos através do "Elemento de inspeção" o bloco que desejamos alterar e procuramos identificadores exclusivos para pesquisa - em primeiro lugar, esses são os nomes de classe ou id específicos do plugin. Aqui id = “fep-header” é definido para o contêiner comum. Pesquisar a ocorrência de uma linha leva a um arquivo com o nome autoexplicativo header.php. Abra com VS Code e observe o seguinte código:



<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>


Para quem não está familiarizado com PHP (como eu), parece HTML, mas com <? Php ... code ...?> Inserts. Essas inserções são usadas para formar uma página HTML dependendo de vários parâmetros, por exemplo, dados do usuário. Ou seja, o PHP é um construtor de página estática e o JavaScript é usado para lidar com eventos complexos.



Copiei o estilo do painel superior do plug-in mais detalhado, removi informações desnecessárias sobre o tamanho da caixa de correio, mudei a forma como as informações sobre novas mensagens são exibidas. Foi o que aconteceu no código e no display.



<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>




Naturalmente, o processo é iterativo e não muito conveniente, mas me resignei. Talvez existam maneiras mais convenientes. Salve o arquivo (VS Code), substitua o arquivo no servidor (FileZilla), atualize a página (Firefox DE). Este não é o caso mais difícil, mas mostra a essência do processo. É o mesmo em tarefas mais complexas - com mudanças em funções, classes e matrizes de dados e em tarefas mais simples - quando você só precisa trocar blocos ou excluir blocos desnecessários.



Mas essa abordagem torna o processo de atualização muito mais difícil. Após a atualização, provavelmente (não o fiz, desde que funcione de acordo com o princípio "funciona e está bom"), você terá que refazer as edições. Esta é provavelmente a principal desvantagem.



4. Desempenho



WP não é sobre velocidade. As tentativas de melhorar a velocidade de download, para ser honesto, não levaram a um aumento significativo, mas levaram a um mau funcionamento. Usei o plug - in Asset CleanUp para remover o carregamento desnecessário de CSS / JS, mas não notei um aumento perceptível na velocidade de carregamento (olhei para GTmetrix ), mas notei que alguns plug-ins sobem em todas as páginas, independentemente de serem usados ​​ou não. Como resultado, eu o desliguei por enquanto. Então tentei W3 Total Cachepara páginas de cache no servidor - quando a página não é gerada usando PHP, mas uma cópia pronta é carregada (que é atualizada periodicamente). Mas com isso meu site travou, e então também vi que a configuração recomendada não é armazenar páginas em cache para usuários conectados, ficou claro que armazenar páginas em cache no meu caso é bastante difícil de configurar. Deixei apenas o cache parcial de pedaços de código, vou descobrir mais (às vezes agora você tem que redefinir o cache para que as alterações nas configurações do plug-in tenham efeito).



Em geral, acho que em alguns casos funciona muito bem, mas não me ajudou desde o início. Pelo que entendi, o WP Rocket pago tem uma opção de cache para cada usuário, talvez eu tente mais tarde.



5. Segurança



Certa vez, no instituto, ele estudou a especialidade "Segurança da Informação". Embora após a formatura ele tenha começado a estudar eletrônica, a deformação profissional permaneceu. Que a Internet está furada em termos de segurança. Posso imaginar quantas vulnerabilidades existem no WP com sua estrutura empilhada. Nem todos podem ser corrigidos, mas fiz as coisas mais simples seguindo os passos desta instrução e instalei o Wordfence - vamos ver se o desempenho não sofre muito, você pode deixá-lo.



6. Plugins



6.1. Gerenciamento de usuários e acesso



Para resolver o problema, escolhi o plug-in Even Ultimate Membership Pro (US $ 41). Existem tutoriais em vídeo separados sobre ele - aqui. Tive que mexer, muitas configurações, mas não vou escrever sobre tudo em detalhes, se tiver dúvidas responderei nos comentários ou em mensagens privadas. Vou apenas falar sobre os métodos de controle de acesso.

Basicamente, existem várias funções no sistema (que foi originalmente adaptado para blogs) e muitos plug-ins funcionam com elas, controlando os recursos dependendo da função. A função padrão é definida em "Configurações> Geral".





O plugin de gerenciamento de assinatura adiciona outra camada - o nível de assinatura, de acordo com o qual você pode controlar o acesso ao conteúdo e sua exibição para cada página, incluindo a exibição de itens de menu. Além disso, os usuários são divididos em registrados e não registrados - essa é outra forma de separar a exibição do conteúdo.



O plugin não é isento de falhas, mas faz seu trabalho. Existem muitas configurações, mas existem vídeos de treinamento, você pode descobrir, o suporte técnico, se houver, irá apoiar e aconselhar.



6,2 Base de conhecimento



A princípio coloquei o livro na plataforma usando o plugin do visualizador de pdf, mas não há como criar links para o material, e o pdf não é a opção mais flexível de visualização. Recusou-se e decidiu ir para a base de conhecimento. Vou chamar o plugin Echo Knowledge Base , é muito bom. Mas quanto à visualização do pdf - não posso deixar de citar o plugin Flowpaper , é muito bonito, talvez seja útil para alguém.



6.3. Votação



Gostei do plugin Yop Poll - novamente, há tudo que você precisa, todas as configurações, até mesmo a aparência é muito boa na versão gratuita.



7. O que não funcionou



Um blog coletivo precisa da capacidade dos usuários de criar postagens. A escolha não é grande - o plugin User Submitter Posts (também existe um tal pago). Até comprei a versão paga, mas acabou com meu formulário de autorização, conflito com o plugin de gerenciamento de assinaturas - devolvi o dinheiro, o desenvolvedor não resolveu, culpou os outros plugins de tudo. Mas esse não é o ponto. O formulário de criação da publicação não oferece a oportunidade de fazer upload e inserir imagens na publicação.





Começou a lidar com os direitos, foi útil, instalou um plugin útil Editor de papéis do usuário . Portanto, acabou-se por carregar a imagem apenas quando o usuário tinha o direito de editar todas as páginas. Lata cheia, é claro, desativada, enquanto você só pode colocar um link de URL para imagens. O problema aqui é que a postagem ainda não existe e o WP analisa a adição da imagem ao editar a página que contém o formulário de criação da postagem. Talvez alguém possa te dizer como resolver esse plug?



8. Conclusão



O WP tornou possível criar um projeto piloto de uma plataforma não com a funcionalidade mais simples a um custo mínimo. Ele resolveu seu problema criando um ponto de partida para um maior desenvolvimento. Se você tiver perguntas adicionais sobre o conteúdo da postagem, terei o maior prazer em compartilhar minha experiência. Também serei grato pelos comentários e recomendações de especialistas (para melhorar o desempenho - um CDN como CloudFlare, ou um WP Rocket pago, hospedagem especializada como WP Engine ou Wordfence realmente necessário).



Boa sorte a todos!



All Articles