La tarea consistía en crear una plataforma para desarrolladores de PCB con la siguiente funcionalidad:
- calculadoras que simplifican la realización de cálculos específicos;
- base de conocimientos para el desarrollo de placas de circuito impreso;
- blog colectivo;
- mensajes privados.
Inicialmente, era escéptico de que esto pudiera hacerse en WP sin escribir módulos personalizados. Los sitios de una página, blogs, tiendas en línea son simples, sí, pero ¿cálculos de ingeniería? Pero todo funcionó, es muy bueno para la prueba de concepto y más sobre eso. Lo presentaré en forma de casos separados para que quede estructurado.
Nuevamente, soy un desarrollador de impresión, así que cuando pude lograr lo que quería de un complemento cambiando el código PHP de un complemento, me sentí muy feliz. Es decir, de lo que hablaré es para aquellos que quieren hacer un sitio, pero no entienden las complejidades de WP, CSS y PHP, aunque en general entienden de programación y no le temen al código.
1. Herramientas de desarrollo
No hice un análisis comparativo largo de los programas, me bastó con que se resolviera la tarea necesaria. Esto es lo que usé:
- Visual Studio Code es un buen editor gratuito para ver y editar código de complementos;
- Firefox Developer Edition : para ver, editar y analizar páginas;
- FileZilla : para compartir archivos de complementos / temas con el servidor;
- Total Commander : para buscar archivos por texto especificado.
Aquí también incluiré un complemento de WP: Loco Translate , que es simplemente una herramienta insustituible para crear o corregir la traducción de complementos.
En cuanto a WP en sí, en el segmento de YouTube en inglés, probablemente todo esté dicho (no recuerdo no haber encontrado respuesta a la pregunta que surgió), hay muchos canales buenos, mencionaría los canales de Tutoriales de WPBeginner y WordPress.
2. Calculadoras
WP tiene una gran cantidad de complementos, pero hacer cálculos no es una tarea típica en absoluto, a menos que se trate de calcular el costo de los bienes o el seguro. Pero hay un complemento para esta tarea. Cuando lo encontré, me di cuenta de que la idea era realizable. Formulario de campos calculados , e incluso en la versión gratuita, le permite crear formularios para cálculos, en general, es genial. La interfaz y el editor de fórmulas tendrán que resolverse, pero son lógicos y están bien documentados. Así es como se ve el menú de edición usando una de las calculadoras como ejemplo.
Existen varios tipos de campos, incluidos los que permiten organizar visualmente el contenido de un formulario, pero los principales son los campos de entrada (selección o entrada directa de un valor) y de salida (valores calculados).
Cada campo tiene su propio identificador con un número de serie como "nombre de campo% n", de hecho es el nombre de una variable que se utiliza en los cálculos de los campos calculados. En este caso, los campos calculados del servicio se pueden ocultar.
Entre las funciones listas para usar, hay todo lo que necesita, incluso para cálculos complejos, incluidos trigonométricos y trigonométricos inversos. La sintaxis del campo calculado le permite usar ramificaciones if-else, funciones js y llamadas de terceros ( aquí hay un ejemplo de la documentación). Ejemplo de sintaxis de función:
( function() {
if( fieldname3 > 100 ) return fieldname1+fieldname2;
if( fieldname3 <= 100 ) return fieldname1*fieldname2;
} ) ();
Una característica extremadamente útil es la creación de dependencias de visualización en los valores de los campos seleccionados. Aquí está la sección relevante de la documentación, y así es como se ve en un ejemplo:
Para ser honesto, el complemento me acaba de salvar. Por supuesto, las páginas resultaron engorrosas, porque en algunos cálculos hay varias docenas de campos calculados y fórmulas complejas. Quiero que vuele, así que mis planes son hacer frente a la llamada de funciones de terceros que facilitarían la interfaz, aunque todavía no tengo ni idea de cómo hacerlo. Bueno, aquí hay un paso a paso, lo resolveré.
Más de la experiencia, ¿qué recomendaría?
- Excel ( , : «», «POW»), , .
- , , . , .
- (, ) ' '.
- – «Div», . , . «» , «».
3.
Algunos complementos brindan funcionalidad básica en la versión gratuita, pero limitan las opciones para personalizar la apariencia, aunque personalizar la pantalla es bastante simple. Hay dos herramientas para esto: CSS y el propio código PHP. Te lo explicaré como un aficionado para un aficionado.
3.1. Diseñar con CSS
Para cada elemento de la página html, puede definir el estilo de visualización usando CSS:
CSS- {
_1: ;
_2: ;
}
Solo necesita buscar en Google sobre selectores y propiedades, el desarrollo web generalmente está muy bien documentado, incluso en ruso, por lo que no hay problema. Solo daré algunos comentarios.
Para saber qué estilo se aplica a un elemento y cuál es su identificador, necesita Firefox Developer Edition o equivalente. Al hacer clic con el botón derecho en un elemento y seleccionar "Inspeccionar elemento" se muestra un encanto.
Veamos los selectores en este ejemplo. El elemento de interés es el campo de entrada del nombre de usuario. El código html contiene una clase y una identificación, por lo que puede usarlo como selector:
.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 _
El selector de id es más "fuerte", ya que no puede haber elementos con el mismo id en la misma página. Entonces, si un formulario de complemento en particular se usa solo en una página o el estilo de visualización es adecuado para todos los casos, entonces un selector de ID es lo que necesita. Pero, ¿qué pasa si no se establece una identificación para el elemento, que suele ser el caso? Entonces vale la pena observar la presencia de id en los bloques principales. Por ejemplo, en este caso, el contenedor tiene id = "user_box". Entonces el elemento se puede direccionar así:
div#user_box input // _#id _
El anidamiento puede ser más. Como ejemplo:
div.fep-field div.field-with-icon input //
Dado que en este caso el acceso no es id, el estilo descrito para este selector será aplicable tanto al campo de entrada del nombre de usuario como al campo de entrada del asunto del mensaje (ambos en contenedores de la clase "campo-con-icono").
Otra opción que puede resultar útil es un selector de valor de propiedad. Para este ejemplo:
input[type="text"] // «type»
Creo que la esencia es bastante clara, prueba y error funciona muy bien aquí. La belleza es que Firefox DE te permite editar el código de la página, los selectores y las propiedades sobre la marcha. Logramos el resultado deseado y transferimos los cambios resultantes al servidor. Hay tres métodos para esto:
- en el complemento, la configuración puede contener un campo como "CSS personalizado", "Estilos adicionales", etc.;
- lo mismo en la configuración de apariencia del tema;
- Realice cambios en el archivo de origen con CSS (resaltado en la imagen de arriba): con este método no tuve éxito con el archivo de estilo general del tema style.css, hay algo complicado de hacer.
Entre los valores de una misma propiedad en diferentes selectores, siempre se seleccionará el de mayor prioridad. La lógica es que la definición local tiene mayor prioridad que la global. En el caso de que sea imposible anular una propiedad usando un selector, es decir, el modificador "! Important", que aumenta la prioridad del valor:
input[type="text"] {
padding-left: 40px !important; //
}
Lo último que se puede decir sobre los selectores es la construcción "@media" para estilos receptivos, que activa el selector en determinadas condiciones: ancho de visualización mínimo o máximo, etc. Aquí tienes un ejemplo de uso:
@media(max-width:650px) { //
.comment-body .avatar {
width: 50px !important; //
}
}
En cuanto a las propiedades en sí, hay muchas y es necesario consultar la documentación para una tarea específica. Lo más fácil de hacer es cambiar el color, la posición y copiar el estilo terminado. Es conveniente seleccionar el color sobre la marcha en Firefox DE. Con respecto al posicionamiento, debe comprender los distintos valores de la propiedad "mostrar" y leer, por ejemplo, este artículo.
3.2. Personalización de la pantalla con PHP
Las dos razones principales para editar el código del complemento PHP son el reemplazo de texto y la edición del diseño de página.
3.2.1. Reemplazo de texto
En cuanto al primero, de forma amistosa conviene solucionarlo utilizando el menú de configuración del plugin, o utilizando el plugin Loco Translate. ¿Cómo funciona la localización de complementos en general? El idioma del sitio se selecciona en la configuración general de la consola de WP y esto determina qué archivo de traducción se utilizará. El archivo de traducción (extensión .po) tiene la siguiente estructura:
#: utilities.php:1910 utilities.php:2095 //
msgid "Lost your password?" //
msgstr " ?" //
En la línea correspondiente del archivo utilities.php (1910th, por ejemplo) encontramos:
$str .= '<div class="impu-form-links-pass"><a href="'.$lost_pass_page.'">'.__('Lost your password?', 'ihc').'</a></div>';
Aquí puede ver la cadena original y el identificador de dominio de texto del complemento 'ihc', y la cadena traducida se sustituirá como resultado. Loco Translate proporciona una interfaz simple y conveniente para trabajar con archivos de traducción.
A veces, estas líneas contienen caracteres que definen los formatos de salida:% s,% d, etc. - en la traducción, por supuesto, deben conservarse. Con ellos, por cierto, hay problemas con el plural y diferentes terminaciones para diferentes números ("3 comentarios", "5 comentarios"), hay que salir.
Entonces, a veces, si los desarrolladores no indican la entrada en el archivo de traducción, entonces no se puede acceder a ella mediante el método anterior. Tienes que actuar de manera diferente. Todos los archivos de complementos se descargan del directorio / wp-content / plugins / plugin_name y, utilizando una búsqueda por línea o parte de una línea (Total Commander o un equivalente a help), busque el archivo php que lo contiene (es bueno si es único, no " Iniciar sesión "). Y puede reemplazar la cadena directamente en el código o ingresar una entrada en el archivo de traducción y hacer la traducción deseada.
3.2.2. Editando el diseño
Puede surgir una situación en la que desee cambiar algo que no cambia en la configuración del complemento o del tema. Repasaré un ejemplo aquí. Si esta sección despierta interés y dudas, la complementaré. Sobre todo, estaba modificando el complemento Front End PM para correspondencia personal . Funcionalidad impopular, por lo que este es probablemente el único complemento que lo implementa, por lo que la elaboración en la parte de visualización es baja. Devolví el archivo original que formaba el bloque superior de la página para mostrar cómo se hizo de forma secuencial.
Encontramos a través del "Elemento de inspección" el bloque que queremos cambiar y buscamos identificadores únicos para la búsqueda; en primer lugar, estos son nombres de clase o ID específicos del complemento. Aquí id = "fep-header" se establece para el contenedor común. La búsqueda de la aparición de una línea conduce a un archivo con el nombre autoexplicativo header.php. Abra con VS Code y observe el siguiente 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 aquellos que no están familiarizados con PHP (como yo), parece HTML, pero con <? Php ... code ...?> Inserts. Estas inserciones se utilizan para formar una página HTML en función de varios parámetros, por ejemplo, datos de usuario. Es decir, PHP es un constructor de páginas estático y JavaScript se usa para manejar eventos complejos.
Copié el estilo del panel superior del complemento más detallado, eliminé información innecesaria sobre el tamaño del buzón, cambié la forma en que se muestra la información sobre los mensajes nuevos. Esto es lo que sucedió en el código y en la pantalla.
<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, el proceso es iterativo y no muy conveniente, pero me resigné. Quizás haya formas más convenientes. Guarde el archivo (VS Code), reemplace el archivo en el servidor (FileZilla), actualice la página (Firefox DE). Este no es el caso más difícil, pero muestra la esencia del proceso. Lo mismo ocurre en tareas más complejas, con cambios en funciones, clases y matrices de datos, y en tareas más simples, cuando solo necesita intercambiar bloques o eliminar los innecesarios.
Pero este enfoque hace que el proceso de actualización sea mucho más difícil. Después de la actualización, probablemente (no lo hice mientras funcione según el principio "funciona y está bien"), tendrá que volver a realizar las ediciones. Esta es probablemente la principal desventaja.
4. Desempeño
WP no se trata de velocidad. Los intentos de mejorar la velocidad de descarga, para ser honestos, no dieron lugar a un aumento significativo, pero sí provocaron un mal funcionamiento. Usé el complemento Asset CleanUp para eliminar la carga innecesaria de CSS / JS, pero no noté un aumento notable en la velocidad de carga (miré GTmetrix ), pero noté que algunos complementos suben a todas las páginas, independientemente de si se usan allí o no. Al final, lo apagué. Luego probé W3 Total Cachepara almacenar páginas en caché en el servidor: cuando la página no se genera con PHP, pero se carga una copia lista (que se actualiza periódicamente). Pero con eso, mi sitio se bloqueó, y luego también vi que la configuración recomendada es no almacenar en caché las páginas para los usuarios que han iniciado sesión, quedó claro que el almacenamiento en caché de las páginas en mi caso es bastante difícil de configurar. Dejé solo un almacenamiento en caché parcial de fragmentos de código, lo resolveré más (a veces ahora tienes que restablecer el caché para que los cambios en la configuración del complemento surtan efecto).
En general, creo que en algunos casos funciona muy bien, pero no me ayudó de inmediato. Por lo que tengo entendido, el WP Rocket de pago tiene una opción de almacenamiento en caché para cada usuario, tal vez lo intente más tarde.
5. Seguridad
En un momento en el instituto estudió la especialidad "Seguridad de la información". Aunque después de graduarse comenzó a estudiar electrónica, la deformación profesional se mantuvo. Que Internet tiene fugas en términos de seguridad. Puedo imaginar cuántas vulnerabilidades hay en WP con su estructura apilada. No todos pueden ser parcheados, pero hice las cosas más simples siguiendo los pasos de esta instrucción e instalé Wordfence ; veamos si el rendimiento no sufre mucho, puedes dejarlo.
6. Complementos
6.1. Gestión de usuarios y accesos
Para resolver el problema, elegí el complemento Indeed Ultimate Membership Pro ($ 41). Hay videos tutoriales separados sobre él, aquí. Tuve que retocar, muchas configuraciones, pero no escribiré sobre todo en detalle, si tengo alguna pregunta, responderé en los comentarios o en mensajes privados. Solo te contaré sobre los métodos de control de acceso.
Básicamente, hay varios roles en el sistema (que originalmente fue diseñado para blogs), y muchos complementos funcionan con ellos, controlando las capacidades según el rol. La función predeterminada se establece en "Configuración> General".
El complemento de administración de suscripciones agrega otra capa: el nivel de suscripción, de acuerdo con el cual puede controlar el acceso al contenido y su visualización para cada página, incluida la visualización de los elementos del menú. Además, los usuarios se dividen en registrados y no registrados; esta es otra forma de separar la visualización del contenido.
El complemento no está exento de fallas, pero hace su trabajo. Hay muchas configuraciones, pero hay videos de capacitación, puede resolverlo, el soporte técnico, en todo caso, lo apoyará y le informará.
6.2. Base de conocimientos
Al principio, coloqué el libro en la plataforma utilizando el complemento del visor de pdf, pero no hay forma de crear enlaces al material, y el pdf no es la opción más flexible para verlo. Se negó y decidió ir a la base de conocimientos. Llamaré al complemento Echo Knowledge Base , es realmente bueno. Pero en cuanto a la visualización de PDF, no puedo evitar mencionar el complemento Flowpaper , es muy hermoso, tal vez sea útil para alguien.
6.3. Votación
Me gustó el complemento Yop Poll ; nuevamente, hay todo lo que necesita, todas las configuraciones, incluso la apariencia es bastante buena en la versión gratuita.
7. Qué no funcionó
Un blog colectivo necesita la capacidad de los usuarios para crear publicaciones. La elección no es grande - el usuario Remitente Mensajes plug-in (también hay tal una paga uno). Incluso compré su versión paga, pero eliminó mi formulario de autorización, un conflicto con el complemento de administración de suscripción: devolví el dinero, el desarrollador no resolvió el problema, culpó de todo a otros complementos. Pero ese no es el punto. El formulario de creación de la publicación no brinda la oportunidad de cargar e insertar imágenes en la publicación.
Comenzó a comprender los derechos, fue útil, instaló un complemento útil Editor de roles de usuario . Así que resultó que solo se cargaba la imagen cuando el usuario tenía los derechos para editar todas las páginas. Estaño lleno, por supuesto, desactivado, mientras que solo puede poner un enlace URL a las imágenes. El problema aquí es que la publicación aún no existe y WP considera agregar la imagen como editar la página que contiene el formulario de creación de la publicación. ¿Quizás alguien te diga cómo solucionar este tapón?
8. Conclusión
WP hizo posible crear un proyecto piloto de una plataforma sin la funcionalidad más simple a un costo mínimo. Resolvió su problema creando un punto de partida para un mayor desarrollo. Si tiene preguntas adicionales sobre el contenido de la publicación, estaré encantado de compartir mi experiencia. También estaré agradecido por los comentarios y recomendaciones de los especialistas (para mejorar el rendimiento, ¿se necesitará realmente un CDN como CloudFlare, o un WP Rocket pagado, un hosting especializado como WP Engine o Wordfence?).
¡Buena suerte a todos!