Het is noodzakelijk om snel alle wijzigingen op de site zelf te bekijken, zonder de bestanden en code van de site die op internet is geplaatst, te beïnvloeden. Verander bijvoorbeeld het kleurenschema van een blok, verplaats een bewegend element, etc.
Om dit te doen, gebruiken veel webmasters lokale servers Denwer of OpenServer, die een volledige kopie van de site op hun computer draaien. Deze methode is universeel en geschikt voor professionals, met behulp hiervan kunt u de werking van verschillende scripts en plug-ins controleren, experimenteren met het wijzigen van het ontwerp en alle sitebestanden bewerken en na de test de juiste wijzigingen rechtstreeks naar de site overbrengen.
Voor gebruikers die verre van de kunst van webmaster zijn, raad ik aan om voor deze doeleinden een browser te gebruiken. Aangezien ik Chrome gebruik, zal ik instructies geven met schermafbeeldingen voor deze specifieke browser. Naar analogie kunt u werken met Opera, Yandex Browser, Mozilla Firefox en andere browsers, het principe van hun tools is vergelijkbaar.
Instructies 1: hoe de volledige HTML-code van een website in een browser te bekijken
Open de vereiste webpagina voor uw site. Klik met de rechtermuisknop op het gewenste element, er verschijnt een contextueel vervolgkeuzemenu van de browser met de beschikbare opdrachten:
Figuur 1. De volledige HTML-code van een webpagina bekijken in de Chrome-browser
Belangrijk: De opdrachten in het vervolgkeuzemenu kunnen verschillen, bijvoorbeeld voor actieve elementen (links, afbeeldingen, video's) en inactieve (tekst, achtergrond, diva's):
Figuur 2. Vervolgkeuzemenu van de Chrome-browser
Daarom, als u de vereiste opdracht niet hebt gevonden, klikt u met de rechtermuisknop op een andere plaats of gebruikt u de sneltoetsen van de browser.
Terugkerend naar figuur 1, toont het de vereiste opdracht om alle HTML-code van de originele webpagina te bekijken, het heet " Paginacode bekijken". We klikken op de opdracht, er wordt een nieuw tabblad geopend met de volledige code van de originele webpagina, een groot pluspunt voor alles - de weergave is beschikbaar met syntaxisaccentuering:
Figuur 3. Een fragment van de code van deze site
Deze tool is erg handig voor het vinden en bewerken van de items die u zoekt.
Alternatieve manieren om de volledige HTML-code van een webpagina te bekijken
Voor snellere toegang kunt u andere methoden gebruiken om deze tool aan te roepen
- In figuur 1 zien we ook dat deze opdracht beschikbaar is via de sneltoets
+ ; - Invoegen in de adresbalk van de browser view-source: site in plaats van mijn domein, voer je adres in;
Beide methoden zijn universeel en zouden in alle browsers moeten werken.
In eerste instantie zal het voor sommigen lijken dat dit helemaal geen noodzakelijk hulpmiddel is, maar het bekijken van de volledige HTML-code van de site is geweldig om de benodigde elementen in de code te vinden, dit kunnen links, tags, metatags, attributen en andere zijn elementen.
Sneltoetscombinatie
Afbeelding 3. Zoeken op sitecode
Nadat u een zoekopdracht in het zoekformulier hebt ingevoerd, gaat het scherm naar het eerst gevonden element, met behulp van de pijlen kunt u ertussen navigeren en het gewenste element selecteren:
Afbeelding 4. Zoeken op HTML-code van de site
Instructie 2: hoe u de HTML- en CSS-code van de site kunt bekijken en bewerken in de Google Chrome-browser
Nu voor het belangrijkste deel, waarin ik zal laten zien hoe je de HTML- en CSS-code van de site in de browser kunt bewerken. breng de wijzigingen vervolgens over naar de browser.
Zo'n handige tool is altijd beschikbaar in je browser, experimenteer met andere commando's die het voor jou gemakkelijker maken om de site te bewerken.
Of je het nu leuk vindt of niet, vroeg of laat moet je in je WordPress-bestanden kruipen en ze aanpassen aan je behoeften. Er is ook de mogelijkheid om programmeurs in te huren, maar elk verzoek kost je geld, in de meeste gevallen behoorlijk geld voor eenvoudig werk dat weinig tijd kost. Om uw geld te besparen, dat kan worden besteed aan het promoten van uw site, en niet aan een programmeur, zal ik u leren hoe u snel de benodigde codefragmenten in plug-in- of themabestanden kunt vinden.
Waarvoor dient snel zoeken naar php, CSS, html-bestanden?
De meesten van jullie, die dit artikel hebben gelezen, weten al waarom ze zo'n functie nodig hebben, alle bestanden tegelijkertijd doorzoeken, maar als je toevallig bij de rechtbank bent gekomen, zal ik je typische voorbeelden geven die bij dit onderwerp passen.
Mogelijk moet u het volgende vinden:
- Klassen. Wanneer u besluit een klasse te repareren of anders te configureren, moet u de plaats vinden waar deze wordt gebruikt. Het zullen CSS-bestanden of andere zijn.
- Functies bewerken. Als u besluit een functie te repareren, kunt u deze perfect vinden in de bestanden met functies, maar dan moet u bepalen waar deze in andere bestanden wordt aangeroepen.
- Het onderwerp verwijderen van. Het is niet onbelangrijk om het aantal databasequery's, waarvan WordPress een zeer groot aantal genereert, te verminderen door bijvoorbeeld ingebouwde functies aan te roepen .
Elk ander probleem met betrekking tot het vinden van items in een onbekend bestand zal worden opgelost door de onderstaande gids.
Hoe zoek ik naar codefragmenten in bestanden?
Om te beginnen, moeten we de snelle en handige Notepad ++ -editor downloaden en installeren, die via deze link kan worden gedownload.
Ga na de installatie naar de editor en open de bestanden die we nodig hebben, ik zal de Twenty Fourteen-themabestanden nemen, je kunt je eigen bestanden gebruiken.
Om alle themabestanden te openen, moet u ze allemaal selecteren en naar het editorvenster slepen.
De bestanden zijn verplaatst, in het algemeen hadden we dit niet kunnen doen, maar in de toekomst zal het sneller zijn om ze te bewerken.
Bestanden in de editor? Geweldig, nu roepen we het zoekvak op door op de toetsen te drukken Shift + Ctrl + F, we openen het volgende:
In het voorbeeld heb ik de naam van de klasse aangegeven, om de markering van de auteur van het artikel in publicaties aan te geven, dit kan nodig zijn bij het maken van dubbele pagina's.
Geef in het veld "Map" de map aan met het thema waarin onze bestanden zich bevinden. Klik daarna op de knop "Alles zoeken".
Als de parameter correct is ingevoerd, ziet u onderaan het scherm een lijst met bestanden waarin deze klasse en coderegels worden gebruikt voor snel zoeken.
In mijn geval zijn dit twee bestanden op het adres dat in het groen is aangegeven. De klasse zelf is rood gemarkeerd, wat kan worden gevonden met horizontaal scrollen.
Na het definiëren van de bestandsdirectory en de regel waarin de parameter wordt gebruikt, kunt u doorgaan met bewerken.
Voor de duidelijkheid zullen we ook een "kwaadaardige" tag definiëren bloginfo, wanneer aangeroepen, worden query's naar de database gemaakt.
U zult waarschijnlijk verrast zijn door het aantal oproepen naar deze functie, die gemakkelijk statisch kan worden gemaakt zonder de motor te vertragen.
En dat ten minste 8 aanroepen naar de database, van elke pagina die wordt geladen, elke gebruiker kan worden vermeden als u de sjablooncode correct corrigeert.
Als je problemen hebt, schrijf dan in de opmerkingen, we zullen proberen te helpen, of als je een snellere manier weet om naar de nodige informatie in de bestanden te zoeken, zal ik me ook met plezier vertrouwd maken.
Dit laatste artikel is geschreven om u up-to-date informatie te geven over het verwijderen van ongewenste links uit Blogspot-sjablonen en nieuwe Blogger-thema's. Zoals je weet, zijn er in 2018 veranderingen geweest in de Blogger-codes, dus veel acties met de code moeten op een nieuwe manier worden gedaan. Bovendien zijn er nieuwe onderwerpen verschenen die anders gevormd zijn. In verband met deze wijzigingen zullen we het onderwerp van het verwijderen van links analyseren.
U kunt uw blog controleren op externe links op de services https://pr-cy.ru/link_extractor/ en https://seolik.ru/links. Vergeet niet om niet alleen de startpagina van de blog te controleren, maar ook de berichten (berichten) en pagina's (Pagina). Een groot aantal externe links die openstaan voor indexering wordt afgeraden.
Links verwijderen uit de oude standaard Blogger-sjabloon
Gebruik de sjabloon Eenvoudig als voorbeeld.Deze sjablonen bieden de meeste inkomende links. Op mijn testblog, toen ik een eenvoudig thema installeerde, controleerde ik het en vond ik 25 inkomende links op de startpagina, waarvan er 14 waren geïndexeerd.
Ik herinner u eraan dat u een back-up moet maken voordat u wijzigingen aanbrengt in de sjablooncode!
- Blogger-link verwijderen - https://www.blogger.com/. Deze link is ingesloten in de Attribution-widget. Op het tabblad Blogontwerp wordt het weergegeven als een attributiegadget en. Om het te verwijderen, gaat u naar het tabblad "Thema" -> HTML wijzigen. Door te zoeken naar widgets (lijst met widgets), vindt u Attribution1 en verwijdert u alle code samen met de voettekst waarin deze is ingesloten. Dit is hoe de samengevouwen code die moet worden verwijderd eruit ziet:
En hier is de volledige code:
We slaan de wijzigingen op en checken de blog op Naamsvermelding.
- Je hebt zeker de moersleutel- en schroevendraaierpictogrammen op je blog gezien voor het snel bewerken van widgets. Elk dergelijk pictogram heeft een externe link naar Blogger. Nu zijn ze gesloten met de nofollow-tag, maar je moet ze nog steeds verwijderen. U bewerkt de widgets op het tabblad Ontwerpen.
Hier is een gedeeltelijke lijst met links die zijn versleuteld in de moersleutelpictogrammen (de blog-ID is van jou)
- HTML1-widget: http://www.blogger.com/rearrange?blogID=1490203873741752013&widgetType=HTML&widgetId=HTML1&action=editWidget§ionId=header
- HTML2-widget http://www.blogger.com/rearrange?blogID=1490203873741752013&widgetType=HTML&widgetId=HTML2&action=editWidget§ionId=header
- Blog archief: http://www.blogger.com/rearrange?blogID=1490203873741752013&widgetType=BlogArchive&widgetId=BlogArchive1&action=editWidget§ionId=main
- Blogsnelkoppelingen: http://www.blogger.com/rearrange?blogID=1490203873741752013&widgetType=Label&widgetId=Label1&action=editWidget§ionId=main
- Populaire posts: http://www.blogger.com/rearrange?blogID=1490203873741752013&widgetType=PopularPosts&widgetId=PopularPosts2&action=editWidget§ionId=main
Al deze links zijn gemakkelijk te verwijderen. Zoek de tag in je blogsjabloon - Verwijder links om blogposts snel te bewerken ("potloodpictogram"). Maakt het gemakkelijker om berichten te bewerken, maar bevat een bedreiging als een externe link van het formulier: https://www.blogger.com/post-edit.g?blogID=1490203873741752013&postID=4979812525036427892&from=potlood
Hoe te verwijderen:
Methode 1. Bewerk op het tabblad Ontwerp het item "Blogposts" en schakel het selectievakje "Toon" Snel bewerken "uit.
Methode 2. vind de tag in de blogsjabloon - Navigatiebalk verwijderen. Zoek naar widgets in de navbar1 blog html-sjabloon en verwijder alle code samen met de sectie.
Namelijk:
Nu biedt Navbar in de blog geen geïndexeerde externe links, maar ik geloof dat dit een extra element is dat geen functionele belasting draagt, en het is beter om het te verwijderen.
- Verwijder externe links naar afbeeldingen. Wanneer u afbeeldingen uploadt naar een blogpost, wordt er automatisch een link in ingesloten. Om dergelijke links te verwijderen, moet je alle blogposts bewerken. In de modus "Bekijken" en verder naar het pictogram "Link". Als de afbeelding geen externe link bevat, is het pictogram "Link" niet actief wanneer u op de foto in de berichteditor klikt (er is geen pictogram gemarkeerd).
- Verwijder de link naar het profiel van de blogauteur. Verwijder de auteur van de blog onder het bericht. Zoek hiervoor de code
- Sluit de link van de widget "" van indexeren met de nofollow-tag. Als je de profielwidget op je blog gebruikt, gebruik dan een snelle widgetzoekopdracht in de blogsjabloon om de code voor de Profile1-gadget te vinden. U moet de widgetcode bewerken, waarbij u rel = 'author' op twee plaatsen vervangt door rel = 'nofollow' en rel = 'nofollow' aan twee links toevoegt. Je zou zoiets als de screenshot moeten krijgen:
Gemaakt op het voorbeeld van het bewerken van een Google Plus-profiel. Ter herinnering: Google Plus wordt op 2 april 2019 uitgefaseerd. Dienovereenkomstig moet u na deze datum andere wijzigingen aanbrengen in de code van de widget "Over mij". - Controleren op inkomende links van elke blogspot-postpagina met opmerkingen. Zoek en verwijder de code in de blogsjabloon:
Pas in de Blog-instellingen, langs het pad Blog-instellingen -> Overig -> Sitefeed -> Blogfeed toestaan, de volgende instellingen toe:
Externe links verwijderen uit de nieuwe standaard Blogger-sjabloon
Het opmerkelijke thema als voorbeeld gebruiken- Naamsvermelding verwijderen (link hieronder - Blogger Technologies)
Zoek Attribution1 in de widget-zoekblogsjabloon (lijst met widgets) en verwijder de code samen met de sectie die lijkt op de oude Blogger-sjabloon (zie hierboven 1). - Verwijder de link uit de widget "Misbruik melden". Dit is de ReportAbuse1-widget. We vinden in het zoeken op widgets:
De hele code ziet er als volgt uit:
- We controleren de blogpostpagina met opmerkingen en verwijderen links naar analogie met de oude blogsjablonen (zie hierboven - punt 8).
- We pakken links van blogposts die in de postfoto's zijn genaaid (zie punt 5).
Als je door talloze sites op internet bladert, kun je er een paar vinden die we echt leuk vinden. Er rijzen meteen een aantal vragen. Is de site gemaakt met behulp van zelfgeschreven code of een CMS? Wat zijn de CSS-stijlen? Wat zijn de metatags? Enzovoort.
Er zijn veel tools die kunnen worden gebruikt om informatie over de code van een sitepagina te extraheren. Maar we hebben altijd de rechtermuisknop bij de hand. We zullen het gebruiken op het voorbeeld van mijn site.
Hoe bekijk ik de paginacode?
Om de broncode van een sitepagina te bekijken, moet u uw muiscursor over een willekeurig deel van de webpagina bewegen (exclusief afbeeldingen en links). Klik daarna op de rechtermuisknop. Er wordt een venster voor ons geopend met verschillende opties (deze kunnen in verschillende browsers enigszins verschillen). In de Google Chrome browser zijn dit bijvoorbeeld de commando's:
- rug;
- vooruit;
- opnieuw opstarten;
- opslaan als;
- zegel;
- vertalen naar het Russisch;
- pagina code weergave;
- bekijk de code.
We moeten klikken op pagina code weergave, en de html-code van de sitepagina wordt voor ons geopend.
Bekijk de paginacode: waar moet je op letten?
De HTML-code van een pagina is dus een genummerde lijst van regels, die elk informatie bevatten over hoe deze site is gemaakt. Om dit enorme aantal tekens en speciale tekens snel te leren begrijpen, moet u onderscheid maken tussen verschillende delen van de code.
De coderegels in de head-tag bevatten bijvoorbeeld informatie voor zoekmachines en webmasters. Ze worden niet weergegeven op de site. Hier kunt u zien met welke trefwoorden deze pagina wordt gepromoot, hoe de titel en beschrijving zijn geschreven. Ook hier kunt u een link vinden, door erop te klikken, waarmee we meer te weten komen over de Google-lettertypefamilie die op de site wordt gebruikt.
Als de site is gemaakt op CMS WordPress of Joomla, dan is deze ook hier te zien. Dit gebied geeft bijvoorbeeld informatie weer over een WordPress-thema of Joomla-sitesjabloon. U kunt het zien door de inhoud van de blauw gemarkeerde links te lezen. Eén link toont de sitesjabloon.
Bijvoorbeeld:
//fonts.googleapis.com/css?family=Bron+Sans+Pro%3A400%2C400italic%2C600&ver=4.5.3
We zullen de CSS-stijlen voor de paginalettertypen zien. In dit geval wordt het lettertype gebruikt. Je kunt het hier zien - font-familie: 'Source Sans Pro'.
Deze site is geoptimaliseerd met behulp van de Yoast SEO seo plugin. Dit is te zien aan dit becommentarieerde stuk code:
Deze site is geoptimaliseerd met de Yoast SEO-plug-in v3.4.2 - https://yoast.com/wordpress/plugins/seo/
Alle informatie in de body-tag wordt door de browser op het beeldscherm weergegeven. Hier zien we de html-code van de pagina en helemaal onderaan staat de code van het Yandex Metrics-script. Het is verpakt in een tag met commentaar en de tekst:
/Yandex.Metrika-teller
Opsommen
Na een nogal oppervlakkige analyse van de code van de hoofdpagina van de site te hebben uitgevoerd, kunnen we concluderen met behulp van welke tools deze pagina is gemaakt. We zagen erop:
- CMS-WordPress;
- Google-lettertype Source Sans Pro
- WordPress-thema - Sydney;
- Yoast-plug-ins;
- Yandex metrische teller.
Nu is het principe van het analyseren van de html-code van een webpagina vrij duidelijk. Het is helemaal niet nodig om de verkende pagina open te houden in de browser. U kunt de paginacode op uw computer opslaan met de toetsencombinaties ctrl + a, ctrl + c, ctrl + v. Plak het in een teksteditor (bij voorkeur Notepad ++) en sla het op met de html-extensie. U kunt het dus op elk moment dieper bestuderen en meer nuttige informatie voor uzelf vinden.
Ctrl + U
Hoe kan ik de broncode van een item bekijken?
Klik met de rechtermuisknop op het betreffende element op de pagina.
Google Chrome: "Bekijk artikelcode"
Opera: "Inspecteer element"
FireFox: "Element analyseren"
Zoek naar een vergelijkbaar menu-item in andere browsers.
Hallo allemaal!
Vooral aan het begin van het artikel heb ik het hele punt uiteengezet, voor degenen die op zoek zijn naar een snel antwoord.
De informatie is misschien bij velen bekend, maar aangezien ik voor beginnende bloggers, webprogrammeurs en andere goudzoekers schrijf, moet dit hulpartikel aanwezig zijn.
In de toekomst zul je zeker de broncode van pagina's en individuele elementen bestuderen.
Laten we eens kijken naar een concreet voorbeeld van hoe u paginabronweergave kunt gebruiken.
We willen bijvoorbeeld zien welke zoekwoorden voor een bepaalde pagina worden gebruikt. We gaan naar de webpagina waarin we geïnteresseerd zijn en drukken op Ctrl + U. De broncode van deze pagina opent in een apart venster of in een apart tabblad. Druk op Ctrl + F om een stukje code te vinden. In dit geval typen we in het zoekvak het woord " trefwoorden ". U wordt automatisch doorgestuurd naar een codefragment met deze metatag en markeert het gewenste woord.
Naar analogie kunt u andere stukjes code zoeken en bestuderen.
Het bekijken van de volledige broncode van een pagina is in de meeste gevallen niet erg handig, dus in alle browsers is het mogelijk om de code van een afzonderlijk element of fragment te bekijken.
Laten we een specifiek voorbeeld gebruiken om de code van een element te bekijken. Laten we bijvoorbeeld eens kijken of een link een nofollow-kenmerk heeft. Klik met de rechtermuisknop op de link die voor ons van belang is en klik in het vervolgkeuzemenu met de linkermuisknop op het item "Bekijk artikelcode" of vergelijkbaar (afhankelijk van uw browser). Hieronder, in een speciaal venster voor code-analyse, krijgen we iets soortgelijks.
We kunnen zien dat rel = "nofollow" aanwezig is in de linkcode. Dit betekent dat deze link niet zal "lekken" en PR. We zullen hier meer in detail over praten in de volgende artikelen. Wat nu belangrijk is, is dat je nu weet hoe je de broncode van de pagina en de broncode van een afzonderlijk element kunt bekijken.
