homefinance blog
Antes del diseño web receptivo y la omnipresencia de Internet móvil de alta velocidad, la mayoría de los sitios web han creado una versión especial y móvil de su sitio. Una versión móvil que ha eliminado la mayoría del elegante CSS del sitio y otras características para proporcionar una versión más rápida. En ese momento, este era un mal necesario, porque un sitio de escritorio nunca se cargaría o se mostraría correctamente en una pantalla pequeña con una conexión lenta a Internet. Con la introducción de una conexión rápida a Internet para dispositivos móviles, el diseño web receptivo permitió a los sitios web crear un diseño que pudiera funcionar en cualquier dispositivo. Pero, a medida que los sitios web se han vuelto más complejos y los tiempos de carga de las páginas han aumentado, la navegación móvil ha sufrido. Otro factor que contribuye a esto es que no todos tienen datos amplios y de alta velocidad en sus dispositivos móviles.
Actualmente, hay algunos estándares competitivos para sitios web simplificados para cargar mejor y más rápido en los dispositivos móviles. Facebook tiene su propia especificación de páginas instantáneas, que recientemente se ha lanzado como complemento WordPress y estará completamente disponible el 10 de abril. Personalmente, me gusta cuando abro un enlace en Facebook Mobil y se abre en páginas instantáneas. Es mucho mejor y más rápido que abrirlo en un navegador completo. Las páginas móviles aceleradas de Google, una iniciativa de código abierto para hacer que los sitios se carguen más rápido, todavía está disponible ahora. En comparación con AMP, las páginas instantáneas requerirán aprobación en el sitio.
Las páginas móviles aceleradas de Google, una iniciativa de código abierto para hacer que los sitios se carguen más rápido, todavía está disponible ahora. En comparación con AMP, las páginas instantáneas requerirán aprobación en el sitio. AMP es una especificación abierta para páginas de luz, adaptadas a dispositivos móviles. Puede usarlo como visualización móvil en su sitio y, si se activa, permite que la versión AMP de su página sea utilizada por Google para obtener aves de búsqueda y otros lugares en su plataforma. Además, muchos expertos en SEO recomiendan la adopción de AMP, porque es probable que Google recompense a quienes lo hacen. Parte del código que escribí para personalizar. La configuración fue tan simple como la instalación de dos complementos, pero quería personalizar la barra desde arriba y agregar un menú y enlaces de intercambio social a VISI. Configuración Para obtener el amplificador en su sitio, debe instalar el complemento AMP desde automático y, si usa WordPress SEO por Yoast, también debe instalar su complemento AMP. Honestamente, en este momento, podrías terminar. Cuando agrega un “/amp” a sus enlaces permanentes, Google descubre mágicamente la versión de AMP, porque el complemento agrega el metaetichet “AMPHTML” a las páginas que no están a Amp con versiones de AMP disponibles.
Como dije, te mostraré algunas personalizaciones que hice. Antes de hacer esto, es importante tener en cuenta que el tráfico móvil no se dirigirá automáticamente a la versión AMP de su publicación. Si desea que suceda, deberá agregar reglas de reescritura a su archivo .htaccess. CSS CSS Plugin Plugin Personalize ofrece CSS lo suficientemente bueno como para que una publicación se vea bien, con un aspecto mínimo. Dicho esto, la barra superior usa el azul oscuro que espera en WordPress.com. Mi sitio personal usa un tema en blanco y negro y no demasiado color, por lo que quería hacer la barra superior para usar el negro como color de fondo. Mientras agregué CSS personalizado, agregué reglas para las listas ordenadas, porque sabía que lo haría. Haga algunas listas para mi menú y compartir social. Para agregar el CSS, utilicé el filtro “AMP_POST_Template_CSS” y repití mi CSS. Así es como se ve: add_action (‘amp_post_template_css’, function ($ _template) {
?>
Nav.amp-wp-title-bar {fondo: #000;}
UL.JP-AMP-LIST {
Estilo de lista: ninguno;
Pantalla: en línea;
}
UL.JP-AMP-LIST LI {
Pantalla: en línea;
margen: 0 8px;
}
<? Php
}); Cambio de la plantilla Agregar una imagen presentada Aunque el complemento AMS le permite usar plantillas personalizadas, no seguí este camino porque solo quería agregar algunas cosas a la plantilla. Las tres cosas que agregué: la imagen presenté, el menú y los enlaces sociales estaban hechos utilizando el filtro estándar "the_content", pero, dado que solo quería ejecutar en las páginas, agregué estos filtros solo cuando solo se usó AMP. . Para lograr esto, pongo estos filtros en una función conectada a la acción "pre_amp_render_post". Lo primero que quiero hacer es agregar la imagen presentada. Lo único importante a tener en cuenta es que una etiqueta de imagen estándar no funcionará. En cambio, debe usar su etiqueta de imagen especial. El complemento AMP transformará automáticamente la imagen presentada en la marca correcta para usted. Así es como agregué la imagen presentada: add_action ('pre_amp_render_post', function () {
add_filter ('content', function ($ content) {
if (are_post_thumbnail ()) {
$ Image = sprintf ('
%s
', get_the_post_thumbnail ());
$ content = $ imagen. $ contenido;
}
Devuelve $ contenido;
}, 3);
}); Tenga en cuenta que utilicé una prioridad muy baja en ese gancho y puse la imagen presentada antes del contenido preexistente, lo que asegura que la imagen presentada esté en la parte superior de la publicación. Utilicé el enfoque opuesto exacto para agregar menús y enlaces de intercambio social al final de la publicación.
Agregar un menú Una visualización mínima de carga rápida y mínima para una publicación es excelente, pero sin una barra o menú lateral, me preocupa que el visitante no navegue por el resto del sitio. Esto me hizo agregar un menú personalizado en la parte inferior de la página. A continuación se muestra el código de ejemplo para la forma en que elimino el menú especial creado especialmente. El código es muy estándar y no vale la pena ingresar. Lo único importante para recordar es que utilicé la función AMP_GET_PERMALINK () en lugar de get_permalink (). Al hacerlo, se ofrece un enlace de AMP especial cuando sea posible, es decir, cuando el enlace es a un tipo de AMP de aceptación de post, que está implícito solo la publicación o tipo de publicación.Add_Action ('pre_amp_render_post', function () {
add_filter ('content', function ($ content) {
$ menú_name = 'amp';
$ menú = wp_get_nav_menu_object ($ name_meniu);
If (! Vacía ($ menú)) {
$ menú_items = wp_get_nav_menu_items ($ menú-> termin_id);
$ Menú_list = sprintf (‘
menú:’, esc_attr (‘amp-jp-meu-‘. $ Menú_name));
Foreach ($ menú_items ca $ key => $ menú_item) {
$ menú_list. = sprintf (‘
%s
‘, amp_get_permalink ($ menú_item-> object_id), es_html ($ menú_item-> title));
}
$ menú_list. = ‘
‘;
$ contenido. = $ menú_list;
}
Devuelve $ contenido;
}, 1000);
}); Antes de usar este código, asegúrese de haber creado un menú llamado “AMP”.
Agregar enlaces de distribución social Una forma por la cual AMP garantiza un tiempo de carga rápido es evitar el uso de cualquier JavaScript. Un problema con esto es que todos sus botones de distribución social que usan varios SDK de JavaScript no pueden funcionar. Pero tanto Facebook como Twitter le permiten compartir una página usando una URL simple. Probando en mi teléfono Android, estos enlaces se abrieron en las aplicaciones de Facebook o Twitter con el diálogo de intercambio adecuado. Aquí está el código que usé para eliminar los enlaces para compartir. Este código usa add_query_arg () para agregar los argumentos de consulta correctos a los enlaces básicos de Facebook y Twitter: add_action (‘pre_amp_render_post’, function () {
add_filter (‘content’, function ($ content) {
$ post = get_post ();
if (is_object ($ post)) {
$ twitter = add_query_arg (Array (
‘Url’ => urlencode (get_permalink ($ post-> id),
‘status’ => urlencode ($ post-> post_title)
), “https://twitter.com/share”);
$ facebook = add_query_arg (Array (
‘U’ => urlencode (get_permalink ($ post-> id))
), “Https://www.facebook.com/sharer/sharer.php”
);
}
$ shaare = sprintf (‘
distribuir:
<
‘, esc_url_raw ($ twitter), esc_url_raw ($ facebook));
$ contenido. = $ compartir;
Devuelve $ contenido;
}, 1000);
});
